Study/HTML & CSS

[CSS] 수평 정렬 & 수직 정렬

수평 정렬 inline 요소 inline요소와 inline-block 요소에 가능한 방법 요소의 부모 태그에게 text-align: center; 적용 block 요소 요소에 margin: 0 auto; 적용 수직 정렬 수평 정렬과 다르게 한 번에 정렬되는 방법이 없기 때문에 여러 속성들을 함께 써서 적용해야 한다. block 요소 block 요소는 vertical-align 적용이 불가능하므로 inline-block으로 display 값을 변경 vertical-align: middle; 적용 1-1. 정 가운데에 배치 height가 100%인 를 생성 (가운데 배치를 도와 주는 가짜 요소) 이 요소에 vertical-align: middle; 적용 1-2. 요소가 밀려난다면? HTML 작성에서 사이의 ..

[CSS] Baseline (수직 정렬)

Baseline 보통 사람들은 요소의 끝을 baseline이라고 생각하지만, 글자의 바로 밑 라인을 baseline이라고 한다. 크기가 큰 글자와 작은 글자를 두고 보면 아래가 맞춰 있는 모습을 볼 수 있는데 그 선이 baseline이 되는 것이다. 텍스트 뿐만 아니라 이미지, inline 요소도 마찬가지이다. 또한, vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다. vertical-align inline 요소와 inline-block 요소를 수직 정렬할 때 사용한다. block 요소에는 적용되지 않는다. 요소 자체만 정렬하며, 내용에는 영향을 미치지 않는다. table cell에 적용할 때는 제외된다. vertical-align은 정렬하려는 요소를 다른 inli..

[CSS] Display

Display 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 보이는가를 결정하는 속성이다. 모든 요소들은 단 하나의 display 값을 가진다. 여러 종류의 값이 있지만 대부분의 요소들은 inline과 block 중 하나를 가진다. 물론 원래의 기본 값을 CSS를 통해 바꿀 수 있다. inline block inline-block flex list-item none inline inline-level 요소의 기본 값이다. 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다. 하나의 단어나 강조 구문처럼 인식되므로, 태그 다음의 요소는 줄 바꿈 되지 않는다. (수평 정렬) 값 기본 display 값이 inlin..

[SCSS] 상위 셀렉터 참조

상위 셀렉터 참조 SCSS/SASS 문법은 특수 문자 &를 이용하여 자신이 포함된 상위 셀렉터를 참조할 수 있습니다. 안녕하세요. 내용을 적어보겠습니다. 다른 내용을 적어보겠습니다. p { font-size: 20px; color: black; &.second {/* &.second = p.second */ color: red; } } 스타일 덮어쓰기 이러한 문법은 특정 클래스 안에서 스타일을 덮어쓰는 작업을 할 때, 유용하다. Hello? .page p { color: orange; .container & { /* .container & = .container .page p */ color: green; } }

[CSS] CSS 구체성 단위 (우선 순위)

CSS 구체성 단위 (우선 순위) 다양한 셀렉터들이 같은 요소를 가리키면 순위가 정해져야 한다. 이것을 구체성 단위라고 부르는데, 각 요소들은 정해진 점수가 있다. 그 점수가 높은 순서대로 우선 순위로 정해진다. 명시 방법 점수 TAG 1 Class 10 Id 100 HTML 태그의 style 속성 사용 (Inline Style) 1000 Inline Style 셀렉터에 Id가 많은 경우 셀렉터에 class, 속성(attribute), 가상 클래스(pseudo-class)가 많은 경우 일반적인 요소 또는 가상 요소가 많은 경우 /** 예시 **/ div.bbs_content { /* tag 1 + class 1 = 11점 */} body > div#container > div#header {/* tag ..

[CSS] CSS 상속

CSS 상속 CSS에는 상속이라는 개념이 있는데, 부모 요소의 속성을 자식 요소에게 넘겨 주는 것을 말한다. 그러나, 태그와 속성에 따라 상속이 되지 않는 경우가 있기도 한다. 상속되는 속성들 보통 글자, 정렬과 관련된 CSS 태그들은 그대로 상속된다. 예외적으로 태그에는 color 속성이 상속되지 않는다. color font-family font-size font-weight font-height line-height list-style text-align visibility 상속되지 않는 태그에 상속을 받아오는 방법 상속이 되지 않는 태그에 상속을 받기 위해서는 속성 값에 inherit를 사용해 주면 상속을 받을 수 있다. .div a { color: inherit; }

[CSS] 가상 클래스 (pseudo-class)

가상 클래스 (pseudo-class) 의사 클래스라고도 칭하며, 셀렉터에 추가하는 키워드로, 선택하고자 하는 HTML 태그가 특별한 상태일 때 사용한다. history, 컨텐츠의 상태, 마우스의 위치 등과 같은 외부 인자와 관련된 경우에도 스타일 적용이 가능하다. 가상 클래스의 문법 가상 클래스의 이름은 대소문자를 구분하지 않는다. 셀렉터: 의사 클래스 이름 {속성: 속성 값;} class에 사용하는 경우 셀렉터.클래스이름: 의사 클래스 이름 {속성: 속성 값;} ID에 사용하는 경우 셀렉터#아이디이름: 의사 클래스 이름 {속성: 속성 값;} 가상 클래스의 종류 가상 클래스의 종류는 동적 가상 클래스, 상태 가상 클래스, 구조 가상 클래스, 기타 가상 클래스로 나뉜다. 동적 가상 클래스 사용자의 움직임..

[CSS] 기타 셀렉터

직속 자식 셀렉터 (direct children) ">"로 구분한 HTML의 계층 구조의 구조적 표현으로, A>B일 경우에 B 요소는 반드시 A의 1depth 안에 존재해야 한다. p>div>fieldset>#pwd { } 자식 셀렉터 (children) 공백으로 구분하여 태그의 구조를 표현한다. 직속 자식 셀렉터가 반드시 1depth 안에 존재해야 했다면, 자식 셀렉터는 depth를 제한하지 않는다. 명시 과정에서 중간 단계 생략이 가능하며, 몇 depth를 더 내려가던, 지정한 태그 범위 안에 존재하기만 하면 된다. p div #pwd { } 속성 셀렉터 태그 속성에 따른 표현 스타일 시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지에 대한 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태..

[CSS] Overflow

Overflow 내용물이 들어갈 공간이 부족할 경우, 내용이 영역 밖으로 넘쳐 버리는 상황이 발생한다. 이를 보완하는 방법이 overflow 사용이다. Overflow 속성 값 속성 값 설명 visible 기본 값으로, 넘칠 경우 내용이 상자 밖으로 보인다. hidden 넘치는 내용을 숨겨 주어 보이지 않게 한다. scroll 내용물을 숨기고, 스크롤을 이용해 보이도록 한다. auto 컨텐츠 양에 따라 스크롤바 추가를 자동으로 결정한다. div { overflow: visible|hidden|scroll|auto; }

[CSS] 박스 모델 (Box-Model)

크기 단위 및 속성 크기 단위 단위 설명 px 스크린의 픽셀을 기준으로 하는 절대적인 크기를 설정 em 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정 자기 자신의 font-size가 없다면 상위 요소의 font-size를 상속 받음 rem 최상위 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정 % 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정 크기 속성 속성 설명 height 해당 HTML 요소의 높이를 설정 width 해당 HTML 요소의 높이를 설정 max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정 min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정..