AI교육과정 - CSS.1

단비·2022년 10월 25일
0

AI교육과정

목록 보기
18/69
  • id 선택자
    • 웹 문서 안의 특정 부분 스타일을 적용, (#)기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
  • class 선택자
    • 특정 집단의 요소를 한 번에 스타일을 적용, (.)기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
  • 그룹 선택자
    • 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용
  • 자손/자식 선택자
    • 자손 선택자

      • 조성요소 하위의 모든 요소의 스타일을 적용, 자손은 자식을 포함

        div p {}
    • 자식 선택자
      - 부모의 요소 하위의 자식 요소에 스타일을 적용

      ```html
      div>p {}
      ```
      <html>
      <head>
          <title>제목</title>
      </head>
      <body>
          <h2>HTML의 구조</h2>
          <p>안녕하세요.  <span><b>HTML의 구조</b>를 알아볼게요</span></p>
      </body>
      </html>
      HTML
      headbody
      titleh2p
      제목HTML의 구조안녕하세요span
      <b>를 알아볼게요
      HTML의 구조
  • 일반/인접 형제 선택자
    • 일반 형제 선택자
      • 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용

        h2~p {}
    • 인접 형제 선택자
      • 동일한 부모의 요소를 갖는 자식 요소들의 관계

        h2 + p {} <!--h2 바로 다음 -->
  • 속성 선택자
    • HTML 요소에서 src, href, style, type, id, class..등 속성을 선택자로 지정해서 스타일 적용

      [src]{}
      [src="apple.png"] {}
  • 가상 선택자
    • 클래스를 추가할 필요없이 요소 중에서 순서에 따라 스타일을 적용

      li:first-child
      /*li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용*/
      li:last-child
      /*li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용*/
      li:nth-child(n)
      /*li 요소 중에서 n번째 요소의 스타일을 적용 (예: 첫번째 요소부터 두번째마다 선택 li:nth-child(2n+1)*/
      li:nth-child(odd)
      /*li 요소 중에서 홀수번째에 해당하는 요소의 스타일을 적용*/
      li:nth-child(even)
      /*-li 요소 중에서 짝수번째에 해당하는 요소의 스타일을 적용*/
      :link
      /*하이퍼 링크가 연결됐을 때 선택*/
      :visited
      /*특정 하이퍼링크를 방문한 적이 있을 때 선택*/
      :hover
      /*특정 요소에 마우스를 올렸을 때 선택*/
      :active
      /*특정 요소에 마우스 버튼을 클릭하고 있을 때 선택*/
      ::before
      /*특정 요소 앞에 텍스트 및 이미지를 삽입*/
      ::after
      /*특정 요소 뒤에 텍스트, 이미지 등을 삽입*/
  • CSS의 컬러
    1. 색상 이름으로 표현

      ex) deeppink, deepskyblue, red, blue …

    2. RGB 색상 값으로 표현

      ex) rgb(0~255, 0~255, 0~255)

      rgba(0~255, 0~255, 0~255, 0~1의 소수)

    3. 16진수 색상값으로 표현

      ex) #0000ff(파랑)

  • CSS의 텍스트
    1. color

      • 텍스트의 색상을 설정, 기본색은 검정색
    2. letter-spacing

      • 텍스트 내에서 글자 사이의 간격을 설정 ex) 안 녕. 규 카 츠 방 어
    3. word-spacing

      • 텍스트 내에서 단어 사이의 간격을 설정 ex) 안녕. 규카츠 방어
    4. text-align

      • 텍스트 수평 방향 정렬을 설정
    5. text-indent

      • 단락의 첫 줄의 들여쓰기를 설정
    6. line-height

      줄 높이를 정하는 속성

      • normal : 1.2
      • px, %, 자연수 ex) 글자크기가 40px일 때 line-height: 1.5 → 줄 높이는 40의 1.5배인 60px → 글자 크기는 40px이므로 글자 위와 아래에 각각 10px의 여백이 생김(줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침)

      😑 브라우저 텍스트 크기

      pc : 16px / mobile : 12px

    7. text-decoration

      • 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용 ex) none, underline, line-through, overline
    8. text-transform

      • 텍스트에 포함된 영문자에 대한 대소문자를 설정 ex) lowercase, uppercase, capitalize
    9. font-variant

      • 소문자를 작은 대문자로 변경 ex) small-caps
    10. text-shadow

      • 텍스트에 그림자 효과를 설정
      선택자 {text-shadow: 가로거리 세로거리 번짐정도 색상;}
    11. text-overflow

      • 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할 지를 결정하는 속성 ex) clip, ellipsis
    12. white-spase

      • 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할 지 결정하는 속성 ex) nowrap, pre, pre-wrap, pre-line
      스페이스와 탭줄바꿈자동 줄바꿈
      normal병합병합O
      nowrap병합병합X
      pre보존보존X
      pre-wrap보존보존O
      pre-line병합보존O
    13. overflow

      • 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 ex) visible, hidden, scroll, auto
    14. font-size

      • 텍스트 크기를 설정
        • 단위 : px, %, em, rem,
    15. font-family

      • 텍스트의 글꼴을 설정

      😛 글꼴을 선택하는 방법

      1. 누구나 설치되어 있는 기본 글꼴 사용
      2. 이미지로 처리
      3. 웹 폰트를 사용
    16. text-weight

      • 텍스트의 굵기를 설정
        • 기본 굵기: 400(범위 100~900)
    17. background-color

      • HTML 요소의 배경색을 설정
    18. background-image

      • HTML 요소의 배경으로 나타날 배경 이미지를 설정, 배경 이미지는 기본 설정으로 반복되어 나타남
        background-image:url(경로);
      • background-repeat
        • 배경 이미지를 수평이나 수직방향으로 반복하도록 설정 ex) repeat-x, repeat-y, no-repeat
    19. background-position

      • 반복되지 않는 배경 이미지의 상대 위치를 변경
      • %나 px을 이용해서 상대위치를 직접 설정할 수 있음
      • 상대 위치를 결정하는 기준은 왼쪽 상단(left top)
      background-position: 가로위치값 세로위치값;
      left topcenter topright top
      left centercenterright center
      left bottomcenter bottomright bottom
    20. background-attachment

      • 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
      • 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
    21. background-size

      • 배경 이미지 크기를 설정 px, %를 사용
      • contain
        • 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건 하에 가능한 설정
        • 가로, 세로 비율은 유지
        • 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
      • cover
        • 배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 조건 하에 가능한 설정
        • 가로, 세로 비율은 유지
        • 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음
    22. background

      • 배경 속성을 한 번에 적용
      background : 파일 위치 반복여부 위치 사이즈 ...
profile
tistory로 이전! https://sweet-rain-kim.tistory.com/

0개의 댓글