Musthave HTML&CSS Day3-4

yoonjin·2022년 12월 8일

CSS MustHave html

MustHave_HTML&CSS

목록 보기

2/4

CSS_선택자

전체 선택자(universal selector)
유형 선택자(type selector)
아이디 선택자(ID selector)
클래스 선택자(class selector)
복합 선택자(combinator selector)

전체 선택자

*{} : head를 포함한 문서 내의 모든 요소를 선택

유형 선택자

태그명{} : 지정된 태그를 가지는 요소를 선택

아이디 선택자

#아이디{} : 아이디를 지정하여 일치하는 요소를 선택

클래스 선택자

.클래스명{} : 클래스명과 일치하는 요소를 선택, 하나 이상 지정 가능

복합 선택자

조상 자손{} : 조상 하위에 있는 자손을 선택, 조상과 자손은 띄어쓰기로 구분
서로의 관계에 따라 자손 선택자, 자식 선택자, 형제 선택자, 일반 형제 선택자 등

배치 속성

박스 모델

요소 : 텍스트, 사진 등 보여줄 대상
패딩 : 요소 감싸는 영역
테두리 : 요소와 패딩을 감싸는 테두리
마진 : 테두리 밖을 감싸는 영역

반응형 디자인

: 화면 해상도에 따라 HTML과 CSS를 자동으로 맞춰서 보여주는 기능

미디어 쿼리

: 사이트에 접속하는 미디어 타입과 특징에 따라 다른 CSS 스타일을 적용하도록 도와주는 규격

@media 미디어타입 (적용 조건) { 규칙 }

미디어 타입 : all(기본, 전부), print(프린트), screen(화면), speech(음성)

@import url("");
@import'';

*@import 는 파일 최상단에 위치해야 함

플렉스박스(flex box)

: 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS

유연하게 레이아웃 변경 가능
반드시 부모 태그를 선택자로 지정해야 자식이 영향을 받음

장점1. 공간에 맞추기 : display flex

자식 요소를 원하는 방향으로 유연하게 배치 가능

2. 주축 정렬하기 : justify-content

justify content : 웹 페이지의 주축을 따라 요소 사이에 공간을 만드는 방법

flex-start : 시작 부분에 정렬
flex-end : 끝에 정렬
cneter : 중앙에 정렬
space-between : 요소가 축을 따라 펼쳐짐, 각 요소사이에 공간 있음
space-around : 요소가 축을 따라 펼쳐지나 주변에 공간이 있음

3. 교차축 정렬하기 : align-items

align-items : 웹 페이지의 교차축을 따라 요소 사이에 공간을 만드는 방법

stretch : 요소의 길이와 교차축의 길이를 같게 함
flex-start : 시작 부분에 정렬
flex-end : 끝에 정렬
center : 중앙에 정렬

4. 플렉스 축 방향 바꾸기 : flex-direction

<style>
    body{  /*부모 태그*/
        flex-direction: column;  /*속성 : 값*/
    }
</style>

flex-direction 속성

row(기본값) : 가로 방향(행) 배치
row-reverse : 역순으로 가로 방향(행) 배치
column : 세로 방향(열) 배치
column-reverse : 역순으로 세로 방향(열) 배치

position 속성

<style>
    적용할 태그 {
        position: 값;
    }
</style>

위칫값

static(기본값) : 기본 위치
! 스크롤 했을 때 요소 위치가 변함
fixed : 웹 브라우저 화면 기준 고정 위치
! 스크롤 했을 때 요소 위치 고정
relative : static 기준 상대적인 위치
! 부모, 자식 관계에서는 부모의 위치를 기준으로 자식의 위치가 결정됨
absolute : static이 아닌 가장 가까운 조상 기준 상대적 위치

가상 선택자(pseudo selectors)

1. 동적 가상 클래스(dynamic pseudo selectors)

: 어떤 상태나 조건이 발생할 때, 사용자의 액션에 따라 스타일이 바뀌는 선택자

1-1) active

: 클릭 시 활성화 되는 가상 클래스

<style>
    button:active {
        color: purple;
    }
</style>
<button>click!</button>

실행>

click!

1-2) visited

: 사용자가 이미 방문한 링크를 표시해 줌

<style>
    a:visited {
        color: purple;
    }
</style>
<body>
<a href="http://velog.io">velog</a>
</body>

실행>

velog

1-3) disabled

: 비활성화된 요소를 나타냄

<style>
    input:disabled {
        background-color: purple;
    }
</style>
<body>
    <input type="text" placeholder="Name" disabled>
</body>

1-4) hover

: 마우스 커서를 요소에 올려놓았을 때 선언한 스타일을 실행

<style>
  body {
    display:flex
  }
  div {
    width: 200px;
    height: 200px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: pink;
  }
  #second:hover {
    background-color: olive;
  }
</style>
<body>
  <div></div>
  <div id="second">마우스를 올려보세요</div>
</body>

실행>

1-5) focus

: input 으로 만든 폼 등 집중을 받은 요소를 나타냄

<style>
  .red-input:focus {
    background: pink;
    color: red;
  }
  .blue-input:focus {
    background: pink;
    color: blue;
  }
</style>
<body>
  <input class="red-input" value="클릭하면 빨갛게 됩니다." />
  <input class="blue-input" value="클릭하면 파랗게 됩니다." />
</body>

실행>

2. 구조적 가상 클래스(structural pseudo selectors)

: id, class 등의 선택자 이용 없이도 요소 선택 가능케 함

2-1) first-child

: 형제 요소 중 첫 번째

2-2) last-child

: 형제 요소 중 마지막

<style>
  span:first-child {
    color: pink;
  }
  span:last-child {
    color: purple;
  }
</style>
<body>
  <div>
    <span>:first-child</span>
    <span>:second-child</span>
    <span>:last-child</span>
  </div>
  <div>
    <span>:first-child</span>
    <span>:second-child</span>
    <h4>:not a span tag</h4>
  </div>
</body>

:first-child :second-child :last-child

:first-child :second-child

:not a span tag

2-3) nth-of-type()

: 형제 그룹 안에서의 위치 기반으로 형제 요소를 선택

<style>
 p:nth-of-type(2n + 1) {
   color: olive;
 }
 p:nth-of-type(2n) {
   color: purple;
 }
 p:nth-of-type(1) {
   font-style: oblique;
 }
</style>
<body>
 <div>
   <div>no count</div>
   <p>first p tag</p>
   <p>second p tag</p>
   <div>no count</div>
   <p>third p tag</p>
 </div>
</body>

실행>

2-4) only-of-type

: 자식 요소 중 유일하게 사용된 요소 지정

<style>
  div :only-of-type{
    font-style: italic;
  }
</style>
<body>
  <div>
    <div>first div tag</div>
    <p>first p tag</p>
    <p>second p tag</p>
    <h4>only one h4 tag</h4>
    <div>second div tag
      <h4>div's child h4 tag</h4>
    </div>
    <p>third p tag</p>
  </div>
</body>

실행>

*Must Have 비전공자를 위한 첫 코딩 챌린지 with HTML&CSS 책을 기본서로 참고, 생활코딩강의에서 배운 내용 및 이미 알고 있는 내용은 제외

yoonjin

이전 포스트

Musthave HTML&CSS Day1-2

다음 포스트

Musthave HTML&CSS Day3-4