CSS

1. 가상선택자

□ 가상선택자

• 본인이 선택한 요소에 어떤 행동과 규칙에 의해서 디자인을 적용하는 것
• css에서 : (콜론 사용)

□ 가상선택자 종류
1) 행동과 관련된 디자인을 적용하는 가상선택자
① :link { } - 방문한 적이 없는 링크의 디자인을 꾼다.
② :active { } - 링크를 클릭하고 있는 동안의 디자인을 바꾼다.
③ :hover { } - 링크에 마우스를 올렸을 때의 디자인을 바꾼다.
④ :fucus { } - input으로 입력칸을 만들었을 때, 입력칸을 클릭하면 생기는 테두리의 디자인을 바꾼다.

2) 일정한 규칙을 바탕으로 한 디자인을 적용
① :first-child { } - 여러 li 태그들 중에서 가장 먼저 나오는 태그에 디자인을 적용한다.
② :last_child { } - 여러 li 태그들 중에서 가장 마지막에 나오는 태그에 디자인을 적용한다.
③ :nth-child( ) { } - 여러 li 중에 ( ) 안의 숫자와 같은 순서의 태그에 디자인을 적용한다.
( )안에 2n + 1을 넣으면 홀수 번째에 있는 li 태그의 디자인을 변경한다.

3) before, after
① ::before { } - 태그와 내용 사이의 공간에 디자인을 한다. 여기에 들어가는 내용은 정보가 없다(그냥 디자인).
② ::after { } - 내용의 끝에 디자인을 한다.

코드

Git 링크.vr_select

2. 프로젝트 진행시 작업 최적화

• 프로젝트 작업 시, 미리 작업 폴더를 구분해주면 작업이 수월해진다.
  

• project 폴더 – img(images), css, js(java script) 폴더 등을 만들어 구분

• <link>에서의 CSS 경로 설정 방법
  href="css/style.css"

코드

Git 링크.project_1

3. CSS 실습(카카오톡 친구 리스트)

출처 : https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common

코드

Git 링크.kakao

• <li>에는 기본적으로 앞에 · (점)이 기본 설정되어 있어, 출력되지 않도록 수정한다.
  style.css 에서

.friends-lists { list-style: none; }

• <a>에는 기본적으로 글자색 파랑, 밑줄이 표시되기에 글자 색은 검은색, 밑줄(text-decoration, 장식 선택)은 출력되지 않도록 수정한다.

  style.css 에서

 .friends-lists .friends-list a{
    color: #000000;
    text-decoration: none;
}

• 이미지의 테두리를 부드럽게 수정하기 위해서 border-radius 를 사용한다.
  ※ border-radius: 에 값을 50% 로 입력하면 원이 만들어진다.

.friends-lists .friends-list a .friend-thumbnail {
    border: solid 2px gray;
    border-radius: 20px;
}

4. CSS 실습(네이버 사이트 일부)

출처 : https://www.naver.com

코드

Git 링크.naver

• { line-height: } 글자 상하 간격을 조절할 수 있는 속성

.living-lists .living-item .living-info .paragraph {
    font-size: 13px;
    color: #404040;
    line-height: 20px;
}