CSS

천소진·2022년 11월 24일

CSS front

Study

목록 보기

22/29

CSS(Cascading Style Sheets)

: html로 작성된 웹문서의 디자인을 해주는 과정.

기본 구조

: 선택자 {속성1: 값 1; 속성2: 값2;...} ( 스타일규칙: 중괄호{} 사이에 규칙을 나열하고, 여러개일 경우 ; 으로 구분 )
: /*주석처리*/

1. 스타일 시트

브라우저 스타일
: 브라우저에 기본으로 적용하는 스타일로 html 만 사용 해도 기능에 따라 크기에 맞게 제공됨.

사용자 스타일
1) 인라인 스타일
: 스타일 시트를 따로 사용하지 않고 적용 대상에 직접 표시하는 방법.
: 적용하고 싶은 태그에 style=" 속성: 속성값;" 형태로 적용

2) 내부 스타일시트
: 웹 문서 안에서 사용할 스타일을 문서 안에 정리하는 방법
: 태그 사이에 작성하며 태그로 묶음.

3) 외부 스타일 시트
: 스타일을 별도 파일(.css)로 저장해놓고 필요할 때 마다 참조해서 사용하는 방법
: 태그 사이에 작성하며 태그로 적용할 웹문서와 스타일 시트 파일을 연결.

2. 선택자 종류

1) 전체 선택자
: * {속성: 값 ...}
: 웹 문서안에 있는전체 요소에 적용할 때 사용.
: 웹브라우저의 기본 스타일을 초기화 할때 주로 사용.

2) 타입 선택자
: 태그명{스타일 규칙}
: 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용.

3) class 선택자
: .class{스타일 규칙}
: 요소의 특정 부분에만 적용할 때 사용.
: 하나의 문서 안에서 여러번 반복할 스타일에 주로 사용.

4) id 선택자
: #id 명{스타일 규칙}
: 요소의 특정 부분에만 적용할 때 사용.
: 하나의 문서 안에서 한번만 사용하는 스타일에 주로 사용.
: class 보다 범위가 조금 더 넓음.

5) 그룹 선택자
: 선택자1, 선택자2{스타일 규칙}
: 같은 스타일이 적용되는 선택자를 한번에 묶어서 정의할 때 사용.

6) 복합 선택자
: 두개 이상의 요소를 지정하는 선택자

하위 선택자 와 자식 선택자
: 하위 선택자 ==> 상위태그 하위태그 { 스타일 규칙} : 상위 태그에 포함된 모든 하위태그에 스타일 적용
: 자식 선택자 ==> 상위태그>하위태그 { 스타일 규칙 } : 상위태그 바로 아래의 하위태그에만 적용
인접형제선택자 와 일반형제선택자 ( 같은 위치에 있는 태그)
: 인접 형제 선택자 ==> 먼저 작성된태그 + 나중에 작성된 태그{ 스타일 규칙} : 하위태그중에서 첫번째 요소만 선택 적용.
: 일반 형제 선택자 ==> 먼저 작성된태그 ~ 나중에 작성된 태그{ 스타일 규칙} : 하위태그 모든 요소 선택 적용
==> 중복 적용 가능.

7) 특성(속성) 선택자
: 특정 태그안의 속성에대해 스타일 지정 할때는 대괄호 [] 사용

태그명 [속성명]{스타일규칙} : 속성값은 고려하지 않고 속성이름이 같으면 모두 적용.
태그명 [속성명 =속성값]{스타일규칙} : 특정 값을 가지는 속성만을 선택해서 스타일 적용.
태그명 [속성명 ~=속성값]{스타일규칙} : 특정 값이 포함된 모든 요소 선택하여 스타일 적용.(완전히 일치)
태그명 [속성명 |=속성값]{스타일규칙} : ~=와 비슷하지만 -등으로 연결된 단어도 선택하여 적용. (- 포함 또는 완전일치)
태그명 [속성명 ^=속성값]{스타일규칙} : 특정 값으로 시작하는 모든 요소를 선택하여 적용.
태그명 [속성명 $=속성값]{스타일규칙} : 특정 값으로 끝나는 모든 요소를 선택 하여 적용. ( 파일 확장자등)
태그명 [속성명 *=속성값]{스타일규칙} : 특정값이 일부라도 포함되면 스타일 적용.(일부만 일치해도 적용)
ex)

input[type=text]{ backgroundcolor: red;}                 //text 입력창의 색상 지정.
img[src$=jpg]{ width:300px; border:2px solid #000;}      //확장자가 jpg 인 요소에 적용.

8) 사용자 동작에 반응하는 가상 클래스
: 웹 브라우저에서 사용자가 특정 동작을 할 때 스타일에 반응이 나타나도록 설정.

태그명:link{ 스타일 규칙} : 방문하지 않은 링크에 적용
태그명:visited{ 스타일 규칙} : 방문한 링크에 적용
태그명:hover{ 스타일 규칙} : 마우스 포인터를 올려놓을 때 적용.
태그명:focus{ 스타일 규칙} : 웹 요소에 focus가 맞춰 졌을 때 적용.
태그명:acative{ 스타일 규칙} : 클릭하여 웹요소를 활성화 했을 때 적용.

9) 요소상태에 따른가상 클래스
:UI 상태에 따른 스타일 적용

태그명:target{ 스타일 규칙} : a를 이용해 페이지 내에서 이동할 때 a 대상에 스타일 설정.
태그명:enabled{ 스타일 규칙} : 사용 가능한 요소의 스타일 설정.
태그명:disabled{ 스타일 규칙} : 사용 불가능한 요소의 스타일 설정.
태그명:checked{ 스타일 규칙} : 선택된 요소의 스타일 설정. (radio 나 checkbox사용시)
태그명:not(특정요소){ 스타일 규칙} : 지정 요소를 제외한 나머지 요소에 한번에 스타일 적용.

10) 구조 가상 클래스
: 웹문서 구조를 기중으로 특정 위치에 있는 요소를 찾아서 스타일 적용.

:only-child : 부모요소 안에 자식요소가 하나일때 선택
A:only-child : 부모요소 안에 A요소가 하나일때 선택
:first-child : 부모 요소 안의 모든 요소중 첫번째 자식요소 선택
:last-chid : 부모 요소안의 모든 요소중 마지마 자식요소 선택
A:first-of-type : 부모요소 안의 A 요소중 첫번째요소 선택
A:last-of-type : 부모요소 안의 A요소준 마지막 요소 선택
:nth-chlid(n) : 부모요소 안의 모든 요소중 n번재 자식요소 선택 ( n 대신 odd,even, 2n, 2n+1등의 수식으로 지정도 가능)
nth-last-child(n) : 부모요소 안의 모든 요소중 끝에서 n번째 자식요소 선택
A:nth-of-type(n) : 부모요소 안의 A 요소중 n번째 요소 선택
A:nth-last-of-type(n) : 부모요소 안의 A 요소중 끝에서 n번째 요소 선택

11) 가상요소
: 문서안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가.
: 특별히 화면에 보이는 부분을 꾸밀때 불필요한 태그를 사용하지 않기 위해 사용.

::first-line |::first-letter : 지정 요소의 첫줄이나 첫글자에스타일 적용.
::before | ::after : 지정 요소의 앞이나 뒤에 스타일 적용.

4. 캐스케이딩 스타일 시트

Cascading : 계단시으로 적용된다는 의미.
: 하나의 선택자에 여러 스타일이 적용될때 스타일 간의 충돌을 최소화 하기 위해 우선순위에 따라 적용하는 스타일을 결정함.

캐스케이딩원칙

우선순위

① 중요도
: 사용자 스타일 →제작자 스타일 →브라우저 기본

② 적용범위
: !Important →인라인 → id → 클래스 → 타입

③ 소스 순서
: 나중에 쓴 스타일이 덮어씀
: 중요도와 적용범위가 같다면 순서로 결정.

스타일 상속
: 하위 요소에서 스타일을 별도로 지정하지 않으면 상위 요소의 스타일이 그대로 적용됨.
: 모든 속성이 상속되진 않음.

텍스트 표현 스타일

1. 글꼴 관련 스타일

1) font-family<글꼴이름>| [<글꼴이름>,<글꼴이름>,...]
: 글꼴 지정하는 속성.
: 글꼴 이름 사이에 공백이 있는경우 "" 로 묶어서 써줌.
:<body>, <p>, <hn>태그 등에서 사용.

2) font-size:<절대크기>|<상대크기>|<크기>|<백분율>;
: 글씨의 크기 설정.
: px, pt, %, em등의 단위 사용.
: 모바일 기기 까지 고려하는 요즘은 상대크기 단위인 em이나 rem 을 많이사용 (1em=16px,12pt)
==>em : 상위 요소에서 지정한 글꼴 크기(1em)를 기준으로 비율 정의
==>rem : 문서 시작 부분에서 지정한 크기(1rem)를 기준으로 비율 정의

3) font-style : normal | italic | oblique;
: 이탈릭체로 표시하고 싶을 때 사용.
: 웹에서는 보통 italic을 많이 사용.

4) font-weight normal | bold | bolder | lighter |100...900;
: 글자의 굵기를 설정.
: 예약어나 숫자를 사용해서 지정.
: 100~900 사이로 지정 할수 있으며 normal이 400, bold가 700.

2. 웹 폰트사용하기

: 모든 사용자가 같은 글꼴로 웹페이지를 볼 수 있게 하기 위해 웹 문서를 서버에 올릴 때 폰트 파일도 함께 업로드 해야함.
: 인터넷 사이트에서 폰트를 제공해 주는 경우에는 링크를 사용하지만 그렇지 않은 폰트는 변환해서 직접 업로드.

폰트 업로드방법
: 컴퓨터에서 사용하는 폰트(.ttf)는 크기가 커서 웹에 적합한 EOT,WOFF,WOFF2로 변환 후 업로드 해야함
: @font-face{ font-family :<글꼴 이름>; src: local(글꼴이름),<글꼴파일>[<글꼴파일>,<글꼴파일>,...] }
ex)

@font-face {
font-family: 'Ostrich';                                   // 폰트 이름 지정 (글꼴파일과 같은 이름을 사용하는 것이 좋음)
src: local('Ostrich Sans'),                               //사용자 시스템에 해당 글꼴이 있는지 확인
     url('fonts/ostrich-sans-bold.woff') format('woff'),  //없다면 웹폰트로 포맷된 글꼴을 내려받기
     url('fonts/ostrich-sans-bold.ttf') format('truetype'), 
     url('fonts/ostrich-sans-bold.svg') format('svg');  
      }

3. 텍스트 관련 스타일

1) color:<색상>
: 텍스트의 색상 지정.

16진수로 표현
: #RRGGBB ==> 두자리씩 겹치면 줄여서 표기 가능.

ex) #ffffff : 흰색 = #fff
#000000:검정색 =#000

영문법으로 표현
: red, yellow, green.....
rgb | rgba로 표현
: rgb(R값,G값,B값)
: rgba(R값,G값,B값, α 투명도(0~1))

ex) rgb(255,255,255)==>흰색
rgba (255,255,255,0.5) ==>50% 불투명도

hsl 로 표현
: hsl(색상, 채도,명도,불투명도) %로 표기

start / end : 텍스트 줄의 시작/끝 위치에 맞추어 정렬
left/right : 왼쪽/오른쪽에 맞추어 정렬
center : 가운데 정렬
justify : 양쪽에 맞추어 정렬
match-parent : 상위 요소를 따라서 정렬

3) line_heignt : 단위크기 | 백분율;
: 줄 간격 조정.
: (폰트크기*2)px= 2.0=200%
: 텍스트 영역의 높이 와 똑같이 지정하면 세로정렬가능.

4) text-decoration none | underline | overline | line-through;
: 텍스트에 줄을 표시하거나 없앨 때 사용.
: 하이퍼링크 적용시 자동으로 생기는 밑줄을 없앨 수 있음.

5) text-shadow : none | 가로거리 세로거리 번짐정도 색상
: 텍스트에 그림자 효과 설정.
: 가로거리와 세로거리는 필수 속성이며, 양수는 텍스트의 오른쪽 음수는 텍스트의 왼쪽에 그림자를생성.
: 번짐정도는 선택적이며 기본값은 0, 양수는 모든방향으로퍼지고 음수는 모든방향으로 축소됨.
: 색상의 기본값은 텍스트의 색상이며, 여러색상 지정도가능함.

6) text-transform : capitalize | uppercase | lowercase | full-width;
: 영문자 표기할 때 대소문자를 원하는대로 바꿀때 사용.

7) letter(word)-spacing : 간격 (px | em | %);
: 텍스트 사이의 간격을 조정.
==> letter : 글자간격
word : 단어간격

4. 목록 스타일

disc : 채운 원모양
circle :
square
decimal
decimal-leading-zero
lower-roman | upper-roman
lower-alpha | upper-alpha
none

2) list-style-image : url('이미지 경로') | none ;
: 불릿을 원하는 이미지로 지정.

3) list-style-position : inside | outside ;
: 리스트를 들여쓰기 할때 사용. default = outside

4) list- style : type image position ; (순서 상관없음)
: list-style 로 정의해서 한번에 지정도가능

5. 표 스타일

1) caption-side : top | bottom ;
:표 제목의 위치 설정 default = top

2) border : 두께 테두리스타일 색상 ;
: 표 테두리 설정
: 표 전체의 바깥테두리와 셀의 테두리를 각각 설정.

3) border-spacing : 수평거리 수직거리 ;
: 셀 사이의 여백 설정.
: 수평거리와 수직거리를 공백으로구별하며 두개의 값이 같으면 하나만 써도됨.

4) border-collapse | border-separate
: 표와 셀 의 테두리를 합칠지 안합칠지 설정. default = separate

레이아웃 구성

블록레벨과 인라인 레벨

==> 블록레벨 요소 : 태그를 사용해 입력한 내용이 혼자 한 줄을 차지 하는것. = 너비가 100% <hn>, <div>, <p>등
==> 인라인레벨 요소 : 컨텐츠만큼만 영역을 차지하는 것. <span>, <img>, <strong>등

1. 박스모델

: 레이아웃 구성의 기본이 되는 요소로 웹문서에 내용을 박스형태로 정의하는방법.

박스모델의 기본 구성
: 컨텐츠 영역, padding, border, margin

박스모델 속성

1) width, height
:컨텐츠 영역의 크기를 지정하는 속성.
: px | em단위 는 절대값 지정방식으로 웹브라우저 크기와 상관없이 유지 됨.
: % 단위는 브라우저 화면을 기준으로 한 상대값 지정방식으로 브라우저의 크기에따라 변함.
: default = auto

2) box-sizing : boder-box | content- box ;
: 박스모델의 너비와 높이를 어떻게 결정할 것인지 설정.
==> border-box : 테두리까지 포함해서 너비값을 지정
: 웹문서에 여러가지 요소를 배치할 때 컨텐츠 영역 이외에 테두리, 여백, 테두리의두께까지 계산한 실제크기를 자동으로 계산해줌.
==> content-box : default , 컨텐츠 영역만을 너비값으로지정.

3) box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset ;
: 박스모델 에 그림자를 설정.
: 수평거리와 수직거리는 필수속성으로 양수 값은 오른쪽과 아래에 음수값은 왼쪽과 위에 그림자를 만듦.
: 흐림정도는 음수는 불가하고 0에서 값이 커질수록 부드러운 그림자. default =0
: 색상은 여러가지 지정도 가능. default= black
: inset 은 그림자가 안쪽으로나타남.

2. 테두리 스타일 지정

none : default 테두리 없음.
hidden : 테두리 감춤
solid : 실선 표시
dotted : 점선 표시
dashed : 짧은 직선
double : 이중선
groove : 음각 테두리
inset
ridge :양각테두리
outset

2) border-width : 두께 | thin | medium | thick ;
: 테두리의 두께 설정
: 상하좌우 4방향 중 선택해서 지정가능하며, 방향을 적지 않으면 전체적으로 적용.
: 적는 순서는 top을 시작으로 시계방향

3) border-color : 색상 ;
:테두리 색상 지정

4) boder-radius : 크기 | 백분율 ;
: 테두리를 둥글게 설정.
: border 와 radius사이에 위치를 지정해주면 지정한 부분만 설정도 가능.

!!!!!!border-radius: 가로반지름 세로반지름 ;
==> 가로와 세로의 둥근 정도를 달리해서 타원모양 만들기 가능.

3. 여백조절

1) margin : 크기 | 백분율 | auto ;
: 상하좌우 4방향 중 선택해서 지정가능하며, 방향을 적지 않으면 전체적으로 적용.
: 적는 순서는 top을 시작으로 시계방향

2) padding

배경꾸미기

1. 배경색과 범위 지정하기

1) background-color : 색상 ;
:배경색 지정

2) background-clip : border-box | padding-box | content-box ;
: 배경색 적용 범위 지정.

2. 배경 이미지 지정하기

1) background-image :url('파일경로') ;
: 브라우저 배경에 적용할 이미지 지정

2) background-repeat : repeat | repeat-x | repeat-y | no-repeat ;
: 배경 이미지 반복속성 지정.

repeat : 브라우저에 가득 찰 때가지 가로와 세로로 반복 default
repeat-x : 브라우저 너비에 가득차도록 가로로 반복
repeat-y : 브라우저 높이에 가득 차도록 세로로 반복
no-repeat : 반복하지 않음.

4) background-origin : border-box | padding-box | content-box ;
: 배경 이미지 적용 범위 설정

5) background-attachment : scroll | fixed ;
: 배경이미지 고정 여부 설정.

6) background : image repeat position attachment ;
: background 로 한번에 지정 가능하며 순서는 상관없음.

ex)

background-image: url('images/bg4.jpg');
background-repeat :  no-repeat;
background-position : left;
background-attachment : top;
                    ↓
background:url('images/bg4.jpg') no-repeat left top;

7) background-size : auto | contain | cover | 크기 | 백분율 ;

auto : 원래 이미지의 크기만큼 default
contain : 요소안에 이미지가 다들어오도록 확대 또는 축소
cover : 이미지가 요소를 다 덮도록 확대 또는 축소
크기 : 너비와 높이를 직접 지정. 한개만 적을 경우 너비로 인식하며 높이는 비율에 맞게 자동계산
백분율 : 이미지가 들어갈 요소를 기준으로 배분율 지정.

트랜지션

1. 변형

: 선택자{transform: 함수}

2차원 변형 : x는 오른쪽 , y는 아래로 갈수록 값이 커짐
3차원 변형 : x는 오른쪽 , y는 아래로, z는 화면에 가까워질 수록 값이 커짐.

1) translate() 함수
2) scale() 함수
3) rotate() 함수
4) skew() 함수

2. 트랜지션(tramsition)

: 웹 요소의 속성이 바뀌도록 설정해주는것
1) transition-property : all | none | 속성 ;
: 트랜지션을 적용할 대상을 지정

2) transition-duration : 시간
: 트랜지션의 진행 시간 설정

4) transition-delay: 시간
: 트랜지션 효과를 언제 시작할것인지설정. default=0

반응형 웹과 미디어 쿼리

1. 반응형 웹

: 웹 요소를 화면 크기에 맞게 재배치 하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해줌.
: PC 와 모바일각각에 맞게 알아서 화면을 구성.

뷰포트 (viewport)
: 스마트폰 화면에서 실제 내용이 표시되는 영역.
: 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시하도록 지정.
==> 기본구조 :
: 태그를 이용해서 태그 사이에 작성.
==> 단위
→ vw : 뷰포트 너비의 1%
→ vh : 뷰포트 높이의 1%
→ vmin : 너비와 높이중 작은값의 1%
→ vmax : 너비와 높이 중 큰 값의 1%

2. 미디어 쿼리

: 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법.
: 기기의 화면의 크기에 따라 레이아웃 구성이 변함.
==> 기본 구조 : @media[ only | not ] 미디어 유형 and(조건) and(조건)...{스타일 규칙}
:<style></style> 태그 사이에 작성하며, and 연산자로 조건을 적용.

==> 미디어 유형
→ all : 모든 미디어
→ print : 인쇄장치
→ screen : 컴퓨터, 휴대폰 스크린
→ tv : TV
→ aural : 화면을 소리로 읽어주는 장치
→ braille : 점자 표시 장치
→ handheld : 태블릿장치
→ projection : 프로젝터
→ tty : 디스플레이 기능이 제한된 장치. px 단위 사용 불가
→ embossed : 점자 프린터

==> 지정 속성
→ width, height : 웹페이지 너비, 높이
→ min/max-width, min/max-height : 웹페이지 최소/최대 너비, 높이
→ device-width, device-height : 단말기 너비, 높이
→ min/max-device-width, min/max-device-height : 단말기 최소/최대 너비, 높이
→ orientation:portrait : 단말기 세로모드
→ orientation:landscape : 단말기 가로모드

중단점
: 화면의 크기에 따라 서로 다른 CSS 를 적용할 분기점.
: 대부분 단말기의 화면 크기를 기준으로 지정.
미디어 쿼리 적용
1) 외부 CSS 파일로 적용
: <link rel="stylesheet" media="쿼리 조건" href= "css 파일 경로">
: @import url(css 경로) 쿼리 조건 ;
: link 또는 @import문을 사용하여 <head></head>태그 사이에 작성

2) 웹 문서에 직접 적용
: <style media="조건"{ 스타일 규칙 } </style>
: <style> @media 조건 { 스타일 규칙 } </style>

3. 그리드 레이아웃

: 반응형 웹 디자인시 화면의 너비에 따라 요소를 재배치 할때 기준이 되는 레이아웃을 구성.
: 웹 사이트를 여러개의 칼럼으로 나눈 후 화면에 맞게 배치하는 것.
: 화면을 규칙적으로 배열하여 일관성을 유지 할 수 있음.

특징
1) 시각적으로 안정된 디자인을 만들수 있음.
2) 업데이트하기 쉬움
3) 요소를 자유롭게 배치 할 수 있음.

4. 플렉스 박스 레이아웃

: 그리드 레이아웃을 기본으로 각 박스를 원하는 위치에 따라 배치 하는 방법
: 수평 또는 수직 방향 중 한쪽을 주축으로 정하고 박스 배치
: 큰 플렉스컨테이너(부모박스)에 플렉스항목(자식박스)들을 주축(main axis)과 교차축(cross axis)을 이용해 배치 .

1) display : flex | inline-flex ;
: 플렉스 컨테이너를 지정하는 속성.

flex : 항목을 블록레벨 요소로 배치
inline-flex : 항목을 인라인레벨 요소로 배치

2) flex-direction : row | row-reverse | column | column-reverse ;

3) flex-wrap : nowrap | wrap | wrap-reverse ;
: 컨테이너 너비보다 많은 항목이 있을 경우 한줄로 할지 여러줄로 할지 지정.

4) flex-flow : direction값 wrap값 ;
: 배치방향와 줄바꿈을 한번에 지정.
: default = row nowrap

5) justify-content : flex-start | flex-end | center | space-between | space-around ;
: 주축에서 항목 간의 정렬 방법을 지정.

6) align-items : flex-start | flex-end | center | baseline | stretch ;
: 교차축에서 항목을 정렬 하는 방법 지정.

7) align-self : flex-start | flex-end | center | baseline | stretch ;
: 교차 축에서 특정 항목의 정렬 방법을 지정.

5. CSS 그리드 레이아웃 사용

: 방향 상관없이 블록 맞추듯 요소를 배치 하는 방법.

1) display : grid | inline-grid ;
: 그리드 컨테이너 지정.

2) grid-temlpate-rows/columns : 값 ;
: 그리드 컨테이너 안에 항목을 배치할 줄의 크기와 개수 지정.
fr : 상대적이 크기를 지정하는 단위 , px은 고정값이므로 반응형 웹에서는 적합하지 않음.
repeat (반복횟수, 크기) : 같은 너비의 칼럼을 여러개 반복해서 배치할 때 사용.
minmax(크기,) : 줄이나 칼럼의 크기의 최솟값과 최댓값을 지정.
auto-fill/fit : 화면 너비에 따라 칼럼의 개수를 자동조절.
→ auto-fill : 남는 공간없이 꽉 채워서
→ auto-fit : 칼럼의 최소 너비까지만 표시하고 남은공간은 무시.

3) grid-column/row-gap, grid-gap : 간격크기 ;
: 열 , 행들의 간격크기를 설정.

천소진

이전 포스트

HTML(2)

다음 포스트

CSS