HTML 10강 - border(테두리 설정)
·
HTML
🔆border(테두리) 테두리에는 기본적으로 3가지 종류가 있다. 1. 바깥쪽 여백 - margin 해당 속성이 차지하고 있는 공간의 외부 테두리 2. 테두리 해당 속성의 외곽선 3. 테두리 안쪽 여백 - padding 해당 속성이 차지하고 있는 공간의 내부 테두리 🔆border의 속성 📌두께(width) 테두리의 두께로, 주로 px단위를 사용한다. 📌스타일(style) 테두리의 스타일로 실선,점선, 이중선 등 다양한 옵션이 존재한다. 📌색상(color) 테두리의 색상으로, 값은 color속성의 포맷을 사용한다. 📌방향(top bottom left right) border : 1px(모든 방향에 1px씩) border : 1px(상하) 1px(좌우) 각각 1px씩 적용 border : 1px(상) 1px..
HTML 9강 - 선택자(tag,id,class,자손선택자 등) (예시 포함)
·
HTML
백문이 불여일견 내용은 codepen에서 실행하여 학습해보자! css파일에 주석을 달아두었다. HTML 삽입 미리보기할 수 없는 소스
HTML8강 - div태그,span태그( 예시 포함)
·
HTML
🟰dIv태그 ☀️ 화면 영역을 분리하기 위한 태그, 혼자서 한 줄을 차지한다. 🟰span태그 ☀️요소를 구분하기 위한 태그, 줄 바꿈이 없고, 내부 컨텐츠만큼 크기를 차지한다. HTML 삽입 미리보기할 수 없는 소스
HTML7강 - table태그 (예시 포함)
·
HTML
🟰table 태그 ☀️table : 표의 시작과 끝을 나타내는 태그 ☀️thead : 표의 상단 부분을 표현하는 태그(column) ☀️tbody: 표의 중심 내용을 표현하는 태그 ☀️tfoot : 표의 하단 부분을 표현하는 태그 ☀️tr : table row의 약자 , 표의 한 줄(row)을 표현하는 태그 ☀️td: table data, 줄 내부의 한 칸을 표현하는 태그 ☀️th : table head, td와 같으나 가운데 정렬, 진하게 처리하는 태그 ☀️colspan, rowspan : 해당 열과 행을 차지하는 수 🔍다양한 예시를 보고 참고해보세요 HTML 삽입 미리보기할 수 없는 소스
HTML6강 - a태그
·
HTML
🟰a태그 ☀️대상을 지정하여 대상위치로 이동하게 하기 위한 링크 ☀️href : Http Reference의 약자, 링크가 참조하는 http상의 참조새아 ☀️href의 값은 클릭하면 브라우저의 주소창에 입력된다. 🔍다양한 예시들이 있으니 하나씩 클릭하면서 효과를 확인해보세요 HTML 삽입 미리보기할 수 없는 소스
HTML5강 - ul(unordered list) , ol(ordered list) (예시 포함)
·
HTML
🟰ul(unordered list) : 순번을 매기지 않는 목록을 나열 ☀️왼쪽에 기호가 들어가기 때문에 left-padding(왼쪽 여백)이 자동으로 주어진다. ☀️기호의 모양은 type요소로 변환이 가능하다. (circle, square등) HTML 삽입 미리보기할 수 없는 소스 🟰ol(ordered list) : 순번을 자동으로 매겨주는 목록을 나열 ☀️ul처럼 왼쪽 여백이 존재한다. ☀️기호의는 type요소로 변환이 가능하다.( a,A,i,I,1 등) HTML 삽입 미리보기할 수 없는 소스