html+css

여백을 조절하는 속성 1. margin 속성 (백과사전 바로가기) - 요소 주변 여백 설정 - 한 요소와 다른 요소 사이의 간격 조절 가능 - margin-left와 margin-right의 값을 auto로 하면, 웹 요소를 중앙에 배치할 수 있음 2. 마진 중첩(margin overlap) 현상 - 요소를 세로로 배치할 경우, 마진과 마진이 만날 때, 큰 값을 기준으로 겹쳐지는 현상 ※ 가로는 겹치지 않음 - margin= 30px;로 설정할 경우, 30px+30px=60px가 아닌 30px로 설정됨 3. padding 속성 (백과사전 바로가기) - 콘텐츠 영역과 테두리 사이 여백 설정

박스 모델(Box Model) 1. 박스 모델(Box Model) - 박스 형태의 콘텐츠 - 박스 모델의 구조 - 실제 콘텐츠 영역 - 박스와 콘텐츠 사이의 여백인 패딩(padding) - 박스의 테두리(border) (border은 따로 정리) - 여러 박스 모델 사이의 여백인 마진(margin) 2. width, height 속성 - 콘텐츠 영역의 크기 - 너비(width), 높이(height)를 설정하여 콘텐츠 영역의 크기를 정함 - , , auto로 설정 가능

한칸 띄우기 1. 한칸 띄우기 - 여러 칸을 띄우고 싶지만 html에서는 제한적임 - 그래서 를 사용 (공백을 의미) 안 녕 하 세 요

반응, 상태, 구조 선택자 1. 반응 선택자 - 사용자 반응으로 생성되는 특정한 상태를 선택함 - :active : 사용자가 마우스로 클릭한 태그 선택 - :hover : 사용자가 마우스 커서를 올린 태그 선택 반응 선택자 반응 선택자 2. 상태 선택자 - 입력 양식의 상태를 선택할 때 사용 - :checked : 체크 상태의 input 태그 선택 - :focus : 포커스를 맞춘 input 태그 선택 - :enabled : 사용 가능한 input 태그 선택 - :disabled : 사용 불가능한 input 태그 선택 사용 가능 사용 불가능 /* input 태그가 사용 가능일 때, */ input:enabled {background-color: white;} /* input 태그가 사용 불가능일 때, *..

엘리먼트의 부모, 자식, 형제관계 1. 엘리먼트의 부모, 자식, 형제관계 - 부모 엘리먼트 : 나를 감싸는 엘리먼트 - 자식 엘리먼트 : 내가 감싸는 엘리먼트 (div > a 처럼 표시) - 후손 엘리먼트 : 부모를 기준으로 자식의 자식인 엘리먼트 (div a 처럼 표시) - 형제 엘리먼트 : 같은 부모를 둔 엘리먼트 2. 예시 html에 다음과 같이 있다고 가정 1 2 1 2 3 - 여기서 div가 부모 엘리먼트이며 h1, h2, ul이 자식 엘리먼트 - h1, h2, ul은 형제 엘리먼트 - li는 ul의 자식 엘리먼트 - css를 div에 적용하면 자식 엘리먼트 또한 적용되며, css를 h2에 적용하면 다른 h1과 ul는 적용되지 않음

display 속성 정리 1. display 속성 (CSS 사전 바로가기) - 웹 페이지의 레이아웃(Layout)을 결정하는 CSS의 중요한 속성 중 하나 - inline-bolck or inline, block, none이 있음 종류 inline-block, inline block none 너비 너비가 설정되어 있지 않다면, 최소한으로 줄어듦 너비가 설정되어 있지 않다면, 최대한으로 넓어짐 없어짐 높이 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 없어짐 line 사용 한 줄에 최대한 여러개가 나옴 한 줄을 무조건 혼자 사용 정렬 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 ※ 예외 사항..

HTML + CSS 1. HTML (HyperText Markup Language) - 하이퍼텍스트를 마크업 하는 언어 ※ 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 ※ 마크업 : 태그(tag)를 이용해 문서에서 어느 부분이 제목이고, 어느 부분이 사진 or 링크인지 표시하는 것 2. CSS (Cascading Style Sheets) - 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트 언어