CSS boxmodel, 속성

강정우·2022년 6월 24일
0

HTML, CSS

목록 보기
12/27
post-thumbnail

#2 CSS 복습.

1. 폰트 속성

  1. 폰트요소란
    요소가 화면에 보이는 방식을 지정
  2. 자주쓰는 폰트 속성 및 설명
    1) font-size : 글자 크기
    2) font-weight : 글자 두께
    3) font-style : 글자 스타일
    4) font-family : 글꼴
    *구글폰트 <- 여기서 다양한 폰트를 다운받을 수 있고 적용할 수 있다.
    방법
    (1) 원하는 폰트를 select하고 link를 복사하여 HTML 헤드부분에 집어넣는다.
    (2) CSS 파일에서 font-family를 typing하고 link 복사부분 및에 있는 코드를 붙여넣는다.

2. 텍스트 속성

  1. color : 글자색
    *CSS 색 <- 여기서 원하는 색상을 선택하여 저장함.
    1) rgba 가 있다. 이 값은 4자의 value를 갖는데 그중 마지막 네번째 value가 흐릿함을 조절하는 역할을 한다.()
    2) 네번째 값이 0에 수렴할 수록 연하다.
  2. letter-spaceing : 글자 사이 간격
  3. line-height : 줄 높이
  4. text-alin : 정렬방식
  5. text-decoration : 텍스트에 선을 깔 수 있음.
  6. text-shadow : 텍스트에 그림자 지정
    1) text-shadow: 1px, 2px, 3px, color의 형태로 쓰이며 순서대로 그림자의 가로길이, 세로길이, blur의 정도 를 뜻한다.

3. 크기단위

  1. px(픽셀) : default 값
  2. em : 부모태그의 폰트 사이즈를 따라간다.
  3. rem : HTML의 기본요소의 폰트사이즈를 따라간다. 반응형 웹페이지에서 쓰임.
    반응형 웹 페이지란 사이즈에 따라 ui가 바뀌는 페이지를 뜻함.
  4. % : 너비 & 높이를 지정할 때
  5. line-height : span이나 div또는 p 태그들의 높이를 지정할 때 line-height의 높이와 height높이가 같게 된다면 세로로 가운데 정렬을 할 수 있다.

4. 반응 선택자

  1. 반응 선택자는 마우스를 올리거나 클릭했을 때 변화를 줄 수 있게함.
  2. 예시로는
#login:hover{color:greed;}
#login:active{text-shoadow:3px 3px 10px black;}

5. 디스플레이

  1. 디스플레이 속성
    1) block : a태그에 display를 block으로 설정해두면 블록자체가 하이퍼링크 범위가 됨.
    2) inline : 컨텐츠가 끝나는 지점까지 너비를 가지는 속성 한마디로 그냥 의미 없음 EX) span, a, strong, textarea 단, 너비와 높이 지정 불가!!
    3) inline-block : width, height, margin, padding 속성 지정가능 내용의 너비만큼 공간 차지줄바꿈은 안되고 대신 span처럼 하지만 크기 지정이 가능한 속성 EX) img, input, button
    4) none : 태그를 화면에 보이지 않게 함. 즉 == delete
    5) opacity : 투명도
    6) inline 요소 내 block 요소를 포함할 수 없음

6. 박스모델

  1. width, height, margin, padding 속성 지정 가능 block 요소 내 inline 요소를 포함할 수 있음.
  2. margin(바깥여백) : top, bottom / left, right / bottom / left 순으로 순차적으로 단위를 부여해서 여백을 둘 수 잇음.
  3. border(경계선) : 속성을 정의하면 요소의 크기가 추가됨.
    *border-radius : 요소의 높이의 절반값이 정확한 원모양임 조금씩 조절하여 원하는 모양으로 쓰면 됨.
  4. padding(안쪽여백) : 요소의 크기가 증가함.
  5. 전체적으로 2*(margin+border+paddint)한 것을 추가하여 고려해야함.
  6. 웹 페이지의 레이아웃을 구성할 때 각 영역별로 크기가 있기 때문에 padding과 border 속성을 적용할 때에는 고려해야한다.
  7. box-sizing의 border-box를 활용하면 크기를 유지하면서 padding과 border를 사용.

7. 포지션

  1. static : 태그가 위에서 아래로 순서대로 배치
  2. relative : 초기위치 상태에서 상하좌우로 위치 이동 또한 다른 요소에 영향을 미치지 않고 욺직일 수 있음.
    1) top : + 값은 오히려 내려감 올리려면 음수(-)로 해야함.
    2) left : + 값은 오히려 오른쪽으로 감 왼쪽으로 보내려면 음수로 해야함.
    3) bottom : + 값은 올라감 내리려면 음수로
    4) right : + 값은 왼쪽으로 오른쪽으로 가려면 음수로
    5) 여기서도 top down 방식이 적용됨 다음 요소도 positon을 적용하게 된다면 가장 최근에 적용한 값이 가장 위로 올라옴
  3. absolute : 절대위치 좌표를 설정
  4. fixed : 화면을 기준으로 절대위치 좌표 설정

추가공부

  1. background-image : 이미지 선택 2개 이상 가능
  2. background-repeat : 똑같은 이미지가 계속 반복됨 반복 안 되게 가능.
  3. background-attachment : 배경이 딱 붙어있게 할 수 있고 또 스크롤에 따라 같이 욺직이게 할 수 있음.
  4. background-position : 배경을 어느 위치에 딱 부착시킬 수 있음.
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글