본문 바로가기

HTML & CSS

(5)
[CSS] 학습내용 정리 - Float Float 사용 목적 : 'block'들을 가로배치하기 위해서 'float' 설정하게 되면 발생하는 일 빈 공간으로 인식한다. 주변 자식 요소들은 빈 자리를 채운다. 부모 요소의 'height' 값도 줄어든다. Display가 'block'으로 바뀐다. 'width'와 'height' 값 설정가능 제대로 된 'block' 역할을 하지 못한다. 'content' 크기만큼 'width' 값을 차지한다.(부모 요소의 'width' 100%만큼 차지하지 않음) 'margin' 값을 설정해도 인식하지 못한다. 모든 자식요소가 'float'하게 되면 부모 요소의 'height' 값은 0이 된다. 전체 레이아웃 붕괴를 일으킬 수 있다. Float 관리하기 부모 요소에게 'overflow: hidden' 설정을 한다...
[CSS] 학습내용 정리 - Box Box Model 구성요소 : Content, Padding, Border, Margin Content : 실질적인 내용이 들어가는 부분(가로 : width, 세로 : height) Padding : 안쪽여백, Content와 Border 사이의 공간 Border : 테두리 border-radius : Border의 스타일을 둥글게 만들어 준다. Margin : 바깥 여백, 요소와 요소 사이의 간격 .box { border : (굵기) (스타일) (색상값); /* 'border'를 사용하지 않을 경우 */ border : nope; } ※ Padding과 Margin 속기형 padding | margin : (top) (right) (bottom) (left) padding | margin : (top,..
[HTML] Tag 정리-3 ① 기타 Tag : 약어 설명을 위한 Tag, ‘title’ Attribute 사용 형태 : 연락처, 주소, URL, e-mail 주소, 전화번호, SNS 등 활용 : 작성 그대로 출력하고 싶을 때 사용용(줄 바꿈 할 필요 없음) : 코드 작성문 형식으로 출력하고 싶을 때 사용( Tag와 함께 활용) 너 ... 혹시 ADHD니? ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ ㅅ ㅔ ㅇ ㄴ ㅇ ㅛ a, r, n = map(int, input().split()) m = a for _ in range(1, n): m = m * r print(m) ※ Tag 내에 들여쓰기까지 모두 적용됐다. Tag 내에 작성문 글씨체가 기존 글씨체와는 다르게 나오는 기본값이 설정 되어 있다. ② Doctype & Structure HTML 파일의 기본..
[HTML] Tag 정리-2 ① Table HTML에 데이터를 담은 표를 만들 때 사용 사용하는 Tag → , , , , , , 함께 사용하는 Attribute → : scope="row | col" - 가로(row)의 인지 세로(col)의 인지 정보제공 → : rowspan="(숫자)", colspan="(숫자)" - 아래(row)와 오른쪽(col)으로 숫자만큼 확장 기본구조 (테이블 헤더) (테이블 데이터) ID 이름 직위 0001 홍길동 부장 0002 이순신 과장 0003 강감찬 주임 월 화 수 목 금 1교시 국어 영어 영어 과학 영어 2교시 수학 수학 3교시 영어 사회 국어 점심시간 4교시 사회 과학 수학 국어 사회 ② Form 사용자로부터 input을 받기 위한 태그 1) Tag에 사용되는 Attribute action="..
[HTML] Tag 정리-1 ① Headings & Paragraph Headings 관련 Tag : 문단의 제목을 나타내는 Tag 종류 : h1, h2, h3, h4, h5, h6 (중요도에 따라) 형태 (내용) Paragraph Tag : 문단의 내용을 나타내는 Tag 형태 (내용) ② Emphasis Emphasis 관련 Tag : 내용을 강조하고 싶을 때 사용하는 Tag 종류 : strong, em ③ Anchor Anchor Tag : 현 위치에서 다른 위치로 이동(링크) Anchor Tag와 함께 사용하는 Attribute(속성) → ‘href’(hypertext reference) 사용방식 1. url 이동 : text 2. 페이지 내 이동 : text 3. 메일주소 : text 4. 전화번호 : text 5. 새 탭에..