Frontend/CSS

css 가상클래스

호ㅁl 2022. 9. 29. 09:17

[float]

인라인블럭은 텍스트가 수평하게 정렬됨

인라인블럭 설정시 위치가 계속바뀌기때문데 수직정렬을 해줘야함

 

 

vertical-align(수직정렬)

:baseline; (기본값)글자가 나열되는 수평라인에 맞추어 정렬.
:top; 행높이를 기준하여 위에 정렬됨
:bottom; 행높이를 기준하여 아래에 정렬됨
:middle; 가운데에 정렬됨
:text-top; 텍스트를 기준하여 위에 정렬
:text-bottom; 텍스트를 기준하여 아래에 정렬

:sub; 아래첨자 위치에 표시
:super; 윗첨자 위치에 표시
:숫자px; 입력한 수치만큼 baseline에서 이동됨.

 

vscode

!+enter키 :
<html lang="ko">  : 사이트의 컨테츠 언어 정의
 
/*리셋코드*/
*{margin: 0; padding:0;}
li{list-style:none;}
img,iframe{vertical-align:top;}

 

<div id="header">
        상단
 </div><!--end:#header--> :닫는div앞에 짝을 주석으로 표현해줌
 
블럭요소 가운데 설정시 margin값을 오토로주면됨
id값을 넣을때 내용을 유추할 수 있는 내용을 넣어줘야한다. id 값은 중복불가
 
[단어 조합방법]
  1. (_)언더바 사용하여 단어를 끊어주거나
  2. (-)마이너스 사용 :프로그램에서는 사용하지않음 마이너스가 연산기호이기 때문
  3. 두번째 단어부터 첫글자를 대문자로 작성하여 단어 표현.

 

글자크기를 사용하여 공백 조절가능

 

alt의 내용이 설명이 가능하면 비워둬도됨

ex)

<li><img src="images/event_img_01.jpg" alt=""/>경연대회</li>
<li><img src="images/event_img_02.jpg" alt=""/>체험/특별행사</li>
<li><img src="images/event_img_03.jpg" alt=""/>세미나</li>
<li><img src="images/event_img_04.jpg" alt=""/>월드커피리더스포럼</li>
<li><img src="images/event_img_05.jpg" alt=""/>WBC2017</li>

되도록이면 float를 적용한 요소에게 margin값을 줘야함

margin-top보다 margin-bottom사용 권장

 

<div>를 나눠갖는 태그들

[상단,중단,하단]

  • <header>:상단영역 - 사이트의 제목(로고)와 인터페이스 요소(네비게이션=메뉴)로 구성된 영역
  • <main>:중앙영역

  •   <main>:중앙영역 - 페이지별로 컨텐츠(내용)가 구성된 영역
    -페이지당 하나만 사용되야함.
    -div를 제외한 다른 영역태그가 감쌀 수 없다.
      <footer>:하단영역 - 회사정보와 관련 메뉴들로 구성된 영역
      <aside>:왼쪽/오른쪽 메뉴영역이나, 화면의 가장자리에 붙어있는 영역

[영역별].

  • <section>:컨텐츠별로 영역생성
    <article>:페이지와 상관없이 독립된 형태의 컨텐츠인 경우,
    <nav>:네비게이션(메뉴)영역생성
    <adress>:회사정보, 주소, 연락정보

 

마우스를 올렸을때 이미지의  내용이 바뀐다

ex)

<li><img src="images/main_menu01.jpg" alt="전주비빔밥"
                            onmouseover="this.src='images/main_menu01_o.jpg'"
                            onmouseout="this.src='images/main_menu01.jpg'"/></li>

<colgroup> : 스타일을 위한 열이 그룹화(여러개 제작가능)

border-collapse:collapse:칸이 붙음
 
■가상클래스(:)=유사클래스
:상황이나 상태에따라 스타일의 대상을 지정하는 기술로, 실제 클래스는 없지만,
따로클래스가 부여된 것처럼 설정한다.

td:first-child =td와 first-child 붙여써야함

 

(1)상황-자식요소가상클래스
:first-child{첫 번째 자식요소를 스타일 대상으로 함.}
:last-child{마지막 자식요소를 스타일 대상으로 함.}
:nth-child(★) {★번째 자식 요소를 스타일 대상으로 지정함.}
:nth-child(odd){홀수번째 자식요소들을 스타일 대상으로 지정함.}
:nth-child(even){짝수번째 자식요소들을 스타일 대상으로 지정함.}
:nth-child(★n){★배수 번째 자식요소를 스타일의 대상으로 지정함.}
예):nth-child(3n){3,6,9,12, ....(3의배수)해당 순번의 요소}
:nth-child(★n+◆){◆번째부터 ★의 배수로 증가되는 순번의 요소}
예):nth-child(4n+5){5,9,13,17,21, ....}
=5부터 시작하여 4의 배수로 증가하는 순번의 요소
※'n'은 0부터 시작한 자연수 대입된다.
※★,◆는 숫자값을 입력한다.