jinseon's log

✔ display - Block과 Inline 요소의 성격을 바꿀 때 사용 - inline-block을 사용하면 두 요소의 성격을 모두 가짐 => 줄바꿈 x => width와 height는 지정 가능 ✔ float - 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 - 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 - 레이어 : 층, 다른 레이어 위로 쌓거나 투명도 조절도 가능 - 레이어가 겹쳐지지 않게 왼쪽에서부터 정렬시키고 싶은 경우 float: left;를 연속적으로 입력 ✔ clear - float에 대한 속성을 제어하고자 할 때 사용 => float로 정렬 후 빈 공간을 어떻게 관리할 것인지 지정 - both : 모든 공간을 비움 - right : 우측 정렬에 대한 공..

✔ 마진 병합 현상 - 태그의 부모 자식 혹은 형제 관계에서 두 마진이 겹치거나 함께 사용되는 현상 ✔ 형제지간의 마진 병합 - margin-bottom과 margin-top 중 숫자가 큰 값으로 적용 ✔ 부모 자식간의 마진 병합 - 자식인 뿐만 아니라 부모인 에도 영향을 미침 => article에 margin-top 적용 시 100px만큼 위에 여백이 생김 -> main도 함께 100px만큼의 여백 생김

✔ Block 요소와 Inline 요소 ✔ Block - 대표 태그 : - y축(세로)으로 정렬 - 줄바꿈 현상이 나타남 - width & height 값 사용 가능 => 공간 만들기 가능 (해당 요소의 크기/차지하는 공간 => 글씨 크기가 아님!) - margin & padding 값 사용 가능 => 상하 배치 작업 가능 (줄간격 조절 기능과 비슷함) ✔ Inline - 대표 태그 : - x축(가로)으로 정렬 - 줄바꿈 현상x => 특정 공간 차지x - width & height, margin & padding 값에 영향을 받지 않음

✔ 박스 모델 - 요소를 감싸는 큰 세가지 축을 의미 (박스처럼 감싸고 있는 형태) - content : 요소 - padding : content와 border 사이의 공백 => border 안 - border : 경계 - margin : content의 가장 바깥 공백 => border 밖 ✔ margin과 padding의 차이 - 여백을 만드는 공간 비교 - margin-left - border 바깥쪽에서 왼쪽에 여백을 만듦 - padding-left - border 안쪽에서 왼쪽에 여백을 만듦 - 공간이 여백을 포함한 크기로 변경되는 점 유의 ✔ margin과 padding 작성 방법 - top right bottom left 순서로 한 줄에 작성 가능

✔ 크기 조절 속성 - width - 선택한 요소의 너비를 설정 - 픽셀(px) : 절대적인 크기 - 퍼센트(%) : 웹 브라우저 안에서 차지하는 상대적인 크기 - height - 선택한 요소의 높이를 설정 ✔ font - font-size - 글자 크기 지정 - font-family - 글꼴을 여러 개 지정할 수 있음 - 브라우저마다 지원하는 폰트가 다름 - 입력한 순서대로 우선순위 적용 - sans-serif는 마지막에 작성하는 디폴트 값 - font-style - 글자의 스타일 지정 - normal : 어떠한 스타일도 적용하지 않음 - italic : 이탤릭체 (기울기)로 나타냄 - oblique : 텍스트를 기울임, italic과 유사하지만 지원하는 웹 브라우저가 거의 없음 - 주로 'italic..

✔ 캐스케이딩 - HTML의 요소들에 대해 CSS로 스타일을 지정해줄 때, 하나 이상의 스타일에 영향을 받을 수 있기 때문에 어떤 스타일을 적용 받을지에 대한 우선순위를 결정하는 것 ✔ CSS의 우선순위를 결정하는 요소 1) 순서 2) 디테일 3) 선택자 1️⃣ 순서에 의한 캐스케이딩 - 위에서 아래로 읽기 때문에 나중에 적용한 속성값의 우선순위가 높음 2️⃣ 디테일에 의한 캐스케이딩 - 더 구체적으로 작성된 (부모 자식 관계가 명료한) 선택자의 우선순위가 높음 3️⃣ 선택자에 의한 캐스케이딩 - 선택자도 마찬가지로 구체적인 것부터 우선 적용됨 - style > id > class > type - style : 태그 안에 작성한 만큼 가장 구체적 - id : 태그 하나만을 유일하게 지정 - class :..

✔ 부모 자식 관계 1 - html은 계층 구조를 가짐 - header 안에 h1과 p태그가 있다고 말할 수도 있지만, 하위에 있다고도 할 수 있음 - : 부모 태그 - & : 자식 태그 => 와 : 부모 자식 관계 => 과 : 형제 관계 (같은 층/레벨) - 부모 자식 관계에서 각각 스타일 지정 시 작은 범위를 지정하는 자식 태그의 스타일이 우선 적용됨 - 부모 태그의 스타일만 지정 시 자식 태그도 같은 스타일이 적용됨 => 부모 태그의 CSS 속성은 자식 태그가 상속 받음 => 자식 태그의 CSS 속성은 부모 태그에 영향을 미치지 않음 ✔ 부모 자식 관계 2 - 원하는 특정 위치의 태그에만 css 속성을 적용하고자 할 경우 부모 태그를 함께 작성 => 부모태그 자식태그 { 속성 : 속성값; }

✔ 선택자 (Selector) - HTML의 어떤 요소에 CSS를 적용할 것인가를 지정하는 하나의 표현 1️⃣ Type Selector // Type Hello World - Type == 태그의 이름 - 특정 태그에 스타일 적용 🤔 스타일 적용을 원하지 않는 부분에도 적용될 수 있음 => 태그는 여러 번 사용되기 때문 2️⃣ Class Selector // Class Hello World - Class : 유사한 기능을 담당하는 태그들을 묶어줌 - 해당 태그의 열린 태그 안에 작성 - (.)은 Class를 의미 - 같은 Class로 지정된 태그들에 대해서만 스타일 지정 3️⃣ ID Selector // ID Hello World - ID : 특정 태그를 단 하나만 지정 => 유일함 - (#)은 ID를 ..

✔ CSS (Cascading Style Sheet) - 정보(HTML)와 디자인(CSS)의 분리 => 디자인 담당 - 문서의 레이아웃과 스타일 정의 - HTML로 작성된 정보를 꾸며주는 언어 ✔ CSS 구성 요소 선택자 { 속성 : 속성값;} - 선택자 - 디자인을 적용할 HTML 영역 - 속성 - 적용할 디자인 정의 - font-size : 폰트 사이즈 - font-family : 글꼴 - color : 폰트 색깔 - background-color : 배경색 - text-align : 텍스트 정렬 방식 - 속성값 - 수행할 역할을 구체적으로 명령 - 세미콜론(;) 필수 입력 ✔ CSS 연동 방법 1️⃣ Inline Style Sheet coding 101 - 태그 안에 직접 원하는 스타일 적용 - 태..

✔ Block 요소 Hello Elice Hello Elice Hello Elice - 특정 공간을 점유 - y축 정렬 형태로 출력 (줄바꿈 현상) - 공간을 만들 수 있고, 상하 배치 작업 가능 ✔ Inline 요소 Bye Elice Bye Elice Bye Elice - x축 정렬 형태로 출력 (한 줄에 출력) - 공간을 만들 수 없고, 상하 배치 작업 불가능