AI교육과정 - CSS.2

단비·2022년 10월 26일
0

AI교육과정

목록 보기
19/69
  • flex-flow: row nowrap;
    • 화면에 넘쳐도 밑으로 내려가지 말라는 뜻
  • resize: none;
    • 사이즈 조절 불가능하게 설정
  • cursor: pointer;
    • input 박스를 클릭하여 커서를 두었을 때

  • 박스모델(Box Model)
    • 모든 HTML 요소는 박스모양으로 구성
    • 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함
  • 내용(content)
    • 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
  • 패딩(padding)
    • 내용과 테두리 사이의 간격
    • padding-top, padding-right, padding-bottom, padding-left
  • 테두리(border)
    • 내용(content)과 패딩(padding) 주변을 감싸는 테두리
    • border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께), border
  • 마진(margin)
    • 테두리(border)와 이웃하는 요소들 사이의 간격

    • 마진은 눈에 보이지 않음

    • 세로 겹침 현상이 나타남

      😊 세로 겹침 현상

    • 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상

  • 박스사이징(box-sizing)
    • width, height 값에 padding, border 영역은 포함되지 않음
    • 만약 width가 100%로 설정했을 경우
    • box-sizing 속성값을 border-box로 설정하면 width와 height 값에 padding과 border을 포함 (border 말고는 content-box가 있음) border-box를 주게되면 창크기가 달라져도 오른쪽 패딩값이 적용돼서 깔끔하게 보일 수 있음
  • css display
    • 웹 페이지의 레이아웃을 결정하는 속성

    • block, inline, inline-block, none

      😎 visibility : hidden; (visible) - hidden은 요소가 있던 공간을 그대로 두고 안보임.(투명100 상태)

  • CSS 폼
    • 폼 요소의 스타일을 설정
  • CSS Position
    • 요소의 위치를 결정하는 방식을 설정
    1. 정적(static) 위치 지정방식

      • 기본값
      • HTML 요소의 위치를 결정하는 기본적인 방식
      • 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
    2. 상대(relative) 위치 지정방식

      😁 차례대로 요소의 위치를 결정하나, 전 요소의 위치가 body값을 벗어나도 해당 요소의 자리는 비워지지 않음

      • HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
      • top, left, right, bottom 속성 값을 사용할 수 있음
    3. 고정(fixed) 위치 지정방식

      • 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치
      • 뷰포트를 기준으로 위치를 설정하는 방식
    4. 부모태그를 이용한 고정(sticky)위치 지정방식

      • fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
      • top, left, right, bottom 속성 값을 사용할 수 있음
      • 익스플로러에서 작동하지 않음
      • top:0 상위 부모 컨테이너의 가장 상단에서부터 적용
    5. 절대(absolute)위치 지정방식

      😁 부모의 요소가 static이 아닌 경우 부모의 요소를 기준으로 위치를 설정, static인 경우 body를 기준으로 위치를 설정

      • 뷰포트를 기준으로 위치를 설정하는 방식
      • 조상요소를 기준으로 위치를 저장할 수 있음
      • 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
      • 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 static 위치 지정방식이 아니여야 함.
      • top, left, right, bottom 속성 값을 사용할 수 있음
  • z-index
    • HTML 요소의 위치를 설정(상대, 절대, 고정) 하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
    • 겹처지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
    • 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨
  • float
    • HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용
    • float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
    • float를 적용받은 요소의 방향을 결정(left, center, right)
    • 컨텐츠의 크기만큼만 영역을 설정하는 블록태그가 됨
    • float를 적용받은 요소는 다른 요소보다 위쪽에 위치
  • clear
    • float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
    • float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 어려움
    • clear 속성을 이용하여 이후에 등장하는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정(left, right, both)
profile
tistory로 이전! https://sweet-rain-kim.tistory.com/

0개의 댓글