728x90
반응형

CSS 11

HTML&CSS 등 초보 개발자를 위한 무료 사이트 9개 추천

웹표준문서를 작성하는 것을 독학하면서 가장 궁금했던 것이 있다. '나 같은 신생아가 대체 이 많은 태그들을 어디서 어떻게 유용하게 가져와서 배우고 쓸 수 있는걸까?' 웹사이트를 하나 구축하려면 코딩을 잘 하는 것도 중요하지만, 웹사이트에서 필요한 글씨체(font), 이미지 (vector icons, images), 그리고 코딩을 연습할 수 있도록 환경이 조성되어야 한다. 그러나 보통 코딩을 배우면서 모든 어플리케이션을 다 컴퓨터에 깔기 힘들 수도 있고, 이 것을 하다가 저것을 하러 다른 앱을 켜고 왔다갔다 하면 굉장히 피곤하기도 하다 ... 정말로... 그리고 강의를 하나 듣는다고 해도 거기에서 배우는 elements가 전부가 아니기 때문에 계속 새로운 것들을 공부해야 한다. 책에 나오는 것들보다 실무에..

HTML & CSS 💙 2020.10.28

lable 태그와 input 태그 정리

lable 사용자 인터페이스 항목의 설명을 나타냅니다. 을 요소와 연관시키려면, 에 id 속성을 넣어야합니다. 그런 다음 에 id 와 같은 값의 for 속성을 넣어야합니다. Do you like peas? input 입력요소로서, 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 유형설명기본 예제 유형 설명 예시 button 기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼. checkbox 단일 값을 선택하거나 선택 해제할 수 있는 체크박스. color 색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다. date 날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 ..

1일차 margin 가운데정렬

margin: 0 0 0 0 시계방향으로 상,하,좌,우로 지정 값의 위치를 주는 것. margin: 30px, 0 로 하면 상, 하는 30px만큼 떨어지지만, 좌,우는 0px가 된다. margin: 0, 500px, 30px, 0 이런 식으로 따로 따로 지정할 수도 있다. margin: 0 auto; 이렇게 지정하면 항상 콘텐츠가 가운데 정렬이 된다. 웹 페이지의 크기에 상관 없이 가운데 정렬이 되기 때문에 매우 중요함. text-align: center; : 글씨 가운데 정렬 em; : 배수로 크기를 키우기 참치김치찌개 심겹살볶음밥 구운닭갈비 왕갈비치킨 오삼철판볶음 결과물

3일차 개인연습 Video 태그 및 html 콘텐츠 모델

video src는 비디오가 어디에 있는지 주소를 불러오는 태그 type는 어떤 확장자인지 controls는 재생버튼 등의 제어창을 보이게 할 것인지 이렇게 한 번에 써도 되고 나눠서 속성태그를 넣어도 된다. 실습화면 결과 화면 Content Models 의 7 분류 Metadata Content Flow Content Sectioning Content Heading Content Phrasing Content Embedded Content Interacitve Content 1. Metadata " base, link, meta, noscript, script, style, title " Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다...

2일차 img 이미지 태그 / audio 소리 태그

1. 이미지 태그 만약 불러오는 이미지 주소에서 이미지를 찾을 수 없다면 깨진 화면이 나타나고, 깨진 화면 옆으로 캡션만 글씨로 나타난다. 이미지를 임의로 키우고 싶다면, 이미지 태그 안에서 width=" " 를 추가하여 사이즈를 조정할 수 있다. 결과물 2. 사운드 태그 가 기본 태그이다. controls 음원의 재생 등을 조정할 수 있는 컨트롤바를 보이게 할 것인가 아닌가를 결정하는데, 보이지 않게 하고 음원만 들려주고 싶다면 넣지 않으면 된다. loop 무한 반복으로 재생되게 하고 싶으면 루프 태그를 넣어 준다. autoplay 웹페이지를 열었을 때 자동으로 재생되게 하고 싶으면 이 태그를 넣으면 된다. 결과물

2일차 table 태그

표 형식의 레이아웃을 만드는 태그 사이에 태그를 넣는다. : 표를 나타내는 태그 : 행을 나타내는 태그 (table row) : 제목 셀을 나타내는 태그 (table header) : 셀을 나타내는 태그 (table data) : 표의 제목을 나타내는 태그 : 제목 행을 그룹화하는 태그 : 바닥 행을 그룹화하는 태그 : 본문 행을 그룹화하는 태그 Korean Math Science 태그 안에 가 늘어날 수록 가로 셀이 여러개가 생긴다. 세로로 행을 늘리고 싶으면 태그를 늘려주면 된다. Border: 테이블의 두께 설정 큰 따옴표 안에 숫자를 넣어 두께 값을 넣어준다. border - 테이블의 테두리 두께 Colspan : 열 합치기 (가로로) 따옴표 안에 숫자를 넣어 몇 개의 열을 합할 것인지 값을 넣어..

2일차 리스트 태그 <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" >

: list 태그 - order리스트 안에 리스트를 만들 때 사용합니다. order list 태그 - 번호를 자동으로 기입해 주는 리스트 태그 unorder list 태그 - 점을 자동으로 기입해 주는 리스트 태그 하이퍼링크 지정 태그 naver google TO DO LIST laundry grocery shopping book a ticket 5 new ideas for project 채널 리스트 YTN EBS MBC SBS TvN -------------------- 결과물 ------------------------- 메뉴 리스트 삼겹살 양고기 만두 치킨 닭갈비 지역 리스트 서울특별시 경기도 충청도 강원도 전라도 제주도 검색 사이트 리스트 naver google TO DO LIST laundry ..

728x90
반응형