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] Display

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

[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] 텍스트 (Text)

텍스트 (Text) Color 텍스트의 색상을 설정한다. 태그에 명시된 color 속성 값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. 각 요소별로 따로 명시된 color 속성 값이 있다면, 해당 속성 값이 태그에 명시된 속성 값보다 우선 적용된다. 색상 표기법은 https://laurus-twt.tistory.com/137 참고 body { color: red; } p { color: maroon; } letter-spacing 텍스트 내에서 글자 사이의 간격을 설정한다. 좁게 하고 싶다면 숫자를 낮게, 넓게 하고 싶다면 숫자를 높게 하면 된다. .decLetterSpacing { letter-spacing: -3px; } .incLetterSpacing { letter-spacing: 10px; ..

[CSS] 폰트 (Font)

폰트 (Font) font-family 글꼴을 지정하는 속성이다. 속성 값이 여러 개의 글꼴로 설정되어 있다면, 웹 브라우저는 앞에서부터 순서대로 글꼴을 읽는다. 되도록이면 가장 앞에 있는 폰트는 큰 따옴표로 감싸 주는 것이 좋다. .serif { font-family: "Times New Roman", Times, serif; } .sansserif { font-family: Arial, Helvetica, sans-serif; } Google Font 홈페이지에서 원하는 폰트를 선택한다. 원하는 스타일을 선택한다. 페이지 오른쪽에 나오는 탭에서 태그 내용을 복사한 후, google font google font 직접 폰트 파일을 첨부 폰트 파일을 저장할 폴더를 생성한 후, 폴더 안에 폰트 파일을 넣는..

[CSS] 색 (Color)

CSS에서 색을 표현하는 방법 색상 이름으로 표현 HTML에서 색상 이름은 대소문자를 구분하지 않는다. https://www.w3schools.com/cssref/css_colors.asp 에 있는 색상 이름을 참고하면 된다. .blue { color: blue; } .green { color: green; } .silver { color: silver; } RGB 색상 값으로 표현 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현하는 RGB 색상값을 사용할 수 있다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다. https://htmlcolorcodes.com/ 를 참고하여 사용하면 된다. .blue { color: rgb(0..

[CSS] 기본 셀렉터 (Selector)

기본 셀렉터 (Selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해 셀렉터(selector)를 사용한다. 종류로는 전체 셀렉터, HTML 요소 셀렉터, 아이디(id) 셀렉터, 클래스(class) 셀렉터, 그룹(group) 셀렉터가 있다. 전체 셀렉터 CSS 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택하는 셀렉터이다. * { color: red; } HTML 요소 셀렉터 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하며 선택할 수 있는 셀렉터이다. h2 { color: teal; text-decoration: underline; } 아이디(id) 셀렉터 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 웹 페이지에 포함한 여러 요소 중에 특정 아이디 이름을 가..