basic/HTML, CSS

day 22 - CSS

못지(Motji) 2021. 5. 25. 15:13

CSS Cascading Style Sheets

HTML 웹 사이트 요소들 나열

CSS : 디자인 구성

독립적 사용 불가 HTML에 도움을 주는 언어

스타일 형식

선택자 { 속성명 : 속성명; 속성명 : 속성값; }

  • 선택자 : Selector라 하며 스타일을 어디에 적용할 것인지 지정하는것
  • {} : 스타일 적용 코드 영역
  • : (콜론) :  속성명과 속성값의 구분자
  • ; (세미콜론) : 속성명:속성값 뒤에 명령어의 조욜를 나타내기 위해 기입
  • /* */ : CSS 내에서 주석표현 방법

CSS 적용 방법 3가지

스타일 규칙들을 한데 묶어 높은것을 '스타일 시트'라 한다.

  • 외부 스타일 시트 : CSS 파일 별도로 작업하여 연결 (확장자 .css)
    <link href="css01.css" rel="stylesheet" type="text/css" />
  • 내부 스타일 시트 : HTML 파일에 <style> 태그로 작업
  • 인라인 스타일 시트 : 태그에 속성으로 작업

스타일 적용 우선순위

  1. 인라인 스타일 > id 스타일 > class 스타일 >태그 스타일
  2. 코드 순서 : 나중에 스타일링한것이 적용

선택자 Selector

  • 전체 선택자
    * : 모든 요소에 스타일 적용
    * {속성명=속성값;}
  • 태그 선택자
    태그명 : 해당 태그명에 모두 적용
    p {속성명:속성값;}
  • class 선택자
    .class속성값 : 특정 부분에 스타일 적용. 그룹 지정하여 적용하듯이 사용
    <p class="test"></p>
    <p class="test"></p>
    .test {속성명:속성값;}
  • id 선택자
    #id속성값 : 특정 요소에 스타일 적용
    id 값은 문서내에서 유일해야하므로 유일한 특정 한개의 요소에만 적용
    <p id="content"></p>
    #content {속성명:속성값;}
  • 여러 선택자 동시 적용
    선택자들을 쉼표로 구분하여 나열
    선택자, 선택자 {속성명:속성값;}

연결선택자

  • 하위선택자
    ▸ 띄어쓰기를 구분으로 부모요소에 포함된 하위 선택 요소 모두 적용
    ▸ 상위선택자 하위선택자 {...}
  • 자식선택자
    ▸ > 를 구분자로 하위요소 전체가 아니라 자식요소에만 스타일 적용 (손자X)
    ▸ 부모선택자 > 자식선택자 {...}
  • 인접 형제 선택자
    ▸ 가장 가까운 형제 요소에 스타일 적용
    ▸ 형선택자 + 아래동생선택자 {...}
  • 형제 선택자
    ▸ 인접과 달리 모든 형제 요소에 적용. 형 아래있는 동생들
    ▸ 형선택자 ~ 아래동생들선택자 {...}

속성선택자

  • 속성
    ▸ 지정한 속성을 가진 요소를 찾아 적용
    ▸ 선택자[속성] {...}
  • 속성값
    ▸속성과 속성의 값이 일치하는 요소를 찾아 적용
    ▸선택자[속성=값] {...}
  • 속성^=값
    ▸ 특정값으로 시작하는 속성
  • 속성$=값
    ▸ 특정값으로 끝나는 속성
  • 속성*=값
    ▸ 특정 값이 일부가 일치하는 속성

가상클래스

사용자 동작에 반응하는 스타일 적용은 가상 클래스 선택자를 사용

a 태그에서 많이 볼 수 있다

  • a:link : 기본. 방문전 링크 스타일 적용
  • a:visited : 방문한 링크 스타일 적용
  • a:hover : 요소에 마우스 커서 올려놓을때 스타일 적용
  • a:active : 요소 활성화 했을때 (누르고 있을때)
  • a:focus : 요소에 초점이 맞추어져 있을때

UI 요소 상태에 따른 가상 클래스

웹의 요소의 상태에 따라 스타일 지정

  • :endable : 텍스트필드
  • :disable : 텍스트필드
  • :checked : 라디오, 체크박스

구조 가상 클래스

웹 문서 구조를 기준으로 특정 위치에 있는 요소 찾아 스타일 적용

  • root : 최상위 html
  • nth-child(n) : 앞에서부터 n번째 자식요소
  • nth-last-child(n) : 끝에서부터 n번째 자식요소
  • nth-child(odd) : 홀수
  • nth-child(even) : 짝수
  • first-child
  • last-child
  • not(선택자) : ()안의 요소를 제거

적용스타일

  • 폰트변경
    ▸ font-family : 사용자의 시스템에 설치 x, 운영체제에 따라 원하는 결과가 안나올 수 있다.
    ▸@font-face : 웹폰트
    ▸ font-size : 글자 크기 지정. px | em | ex | pt
    ▸ font-whight : 글자 굵기 지정. normal | bold | bolder | ligther | 100 | 200
    ▸ font-style : normal | italic | oblique
  • 텍스트 스타일
    ▸ color : 글자 색 지정. 색상명 | rgb(0,0,0) | #0000ff 16진수 표현도 가능
    ▸ text-decoration : 텍스트에 줄표시. non | underline | overline | line-through
  • 문단 스타일
    ▸ text-align : 텍스트 정렬. left | rigth | center | justify
  • 목록과 링크 스타일
    ▸ list-style-type : 목록의 불릿과 번호 스타일 지정 none | disc | circe | square/ 숫자 1 | a | A | i | I ...
  • 색상과 배경
    ▸ background-color : 배경색 지정
    ▸ background-image : 배경 이미지 지정. url('파일경로')
    ▸ background-attachment : 배경 이미지 고정. scroll(기본값) : fixed
    * background : 값 나열

박스모델

✔ 블록 레벨

∙  혼자 한줄 차지하는 요소

∙  태그 : p, h, ul, ol div, form, tavle 등

✔ 인라인 레벨

∙  혼자 한줄 차지하지 않는 요소

∙  태그 img, br, span, input, textarea, button 등

 

✔ display 화면 배치 방법 결정

∙  none : 화면에 표시하지 않음

∙  block : 블럭레벨 지정

∙  inline : 인라인레벨 지정

∙  inline-block : 인라인레벨요소 이면서 블럭레벨 속성을 갖도록 지정한후 마진값 준것

 

✔  border : 테두리

∙ border-whdth, border-color 등 속성이 분리 적용가능하게 있지만

∙ border : 두께 스타일 색상 (이렇게 한번에 적용 가능)

 

✔  여백

∙ margin 속성 : 요소 바깥 여백. margin : 0

값1개 : 상하좌우, 값2개 : 상하/좌우, 값4개 : 상/우/하/좌 순서

∙ padding 속성 : 컨텐츠와 테두리 사이 여백

포지셔닝

box-sizing : 박스 너비 정하기

whidth, height, margin, padding, border 지정

박스모델의 너비 = 컨텐츠 크기 + 좌우 padding + 좌우 border 두께

전체요소의 너비 = 컨텐츠 크기 + 좌우 padding + 좌우 border 두께 + 좌우 margin

 

✔  box-sizing 속성값

content-box : width 속성값을 컨텐츠 영역의 너비값을 사용. default

border-box : width 속성값을 컨턴츠 테두리까지 포함한 전체 너비값으로 사용

float 속성

요소를 문서위에 떠있게 만들어 왼쪽/오른쪽으로 배치

  • lift : 왼쪽 배치
  • right : 오른쪽 배치
  • none : 좌우 어느쪽도 배치 X
  • float 속성해제 : clear 속성
    ∙ left : float:left 적용을 해제
    ∘ right : float:rigth 적용 해제
    ∘ both : 좌우 상관없이 무조건 기본상태로 되돌릴때 사용

시멘틱 태그

헤더, 본문, 사이드바, 푸터 등으로 역할에 맞게 분류하여 구성

가변 레이아웃

✔ 가변구조

px > %

(요소의 너비 / 컨텐츠전체를 감싸는 요소의 너비) * 100

 

✔ 가변폰트

px > em / rem

☑ em : 단위를 사용하면 부모 요소에 지정된 크기에 따라 자식 요소의 글자 크기가 변동

글자 크기(em) = px / 16px

부모 (기본 16px) = 1em

☑ rem

 

✔ 가변이미지

max-width 100%

<img src="이미지 주소" scrset="이미지주소1 배수, 이미지2주소 배수" />

<img src="imgs/xxx.jpg" scrset="imgs/xxx-hd.jpg 2x: />

미디어 쿼리

CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 적용

✔ 구조

@media [only | not] 미디어유형 [and 조건] * [and 조건]

@media screan and (min-width:200px) and (max-width:36px) {....}

 

✔ 조건

화면 크기를 체크해 크그에 따라 다른 CSS가 적용되게, 주로 화면크기와 관련된 것들이 많다.

 

💡 <style> 안에 사용하는 연산자

and : 조건 추가

, : 미디어 쿼리 추가

only : 이것만  

not : 제외하고

💡<style> 안에 사용하는 미디어 유형

all : 모든 미디어

print : 인쇄장치

screen : 컴퓨터(스마트폰 포함) 스크린

tv : TV

aural : 음성 합성 장치

braille : 점자 표시 장치

handheld : 패드처럼 손으로 들고 다니는 장치

projection : 프로젝터

등등