HTML5와 시맨틱 태그

시맨틱 태그 : 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 태그

시맨틱 구조

 

  • header : 머리말을 지정하는 태그
  • nav : 문서를 연결하는 내비게이션 링크 ex) 홈페이지 상단 메뉴바
 header 태그로 헤더 영역 만들기

<header>
	<nav>
		<ul>
    		<li> <a href="#"> 메뉴1 </a></li>	
            <li> <a href="#"> 메뉴2 </a></li>	
            <li> <a href="#"> 메뉴3 </a></li>	
            <li> <a href="#"> 메뉴4 </a></li>	
       	</ul>
	</nav>
</header>
  • hn : 제목을 표시하는 태그
  • iframe : 외부 문서를 삽입하는 태그
    • ex) html안에 html 넣기
  • section : 주제별 콘텐츠 영역을 지정하는 태그
  • article : 독립적인 콘텐츠 내용을 삽입하는 태그
  • aside : 본문 이외의 내용 표시하기 ex) 사이드바, 광고나 링크 모음 등
  • footer : 제작 정보를 나타내는 태그
  • address : 사이트 제작자와 연락처를 나타내는 태그 주로 footer 태그 안에 사용됨

 

HTML5와 멀티미디어

  • object : 웹 문서에 외부 파일을 삽입하는 태그
  • audio : 오디오 파일을 삽입하는 태그 ex) 배경음악
  • video : 비디오 파일을 삽입하는 태그
  • source : 모든 브라우저를 지원하기 위해 다양한 형식으로 변환된 비디오를 삽입하는 태그
  • track : 비디오에 자막 파일을 연결해 표시하는 태그

 

CSS3 선택자

 

  • 연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 한정시킴
    • 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용하기 - 상위요소 하위요소
    • 자식 선택자 : 자식 요소에만 스타일 적용하기 - 부모요소 > 자식요소
    • 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용하기 - 요소1 + 요소2
    • 형제 선택자 : 형제 요소에 스타일 적용하기 - 요소1 ~ 요소2

 

  • 속성 선택자 : 태그 안에서 사용하는 속성들의 값에 따라 스타일 지정
    • [속성] : 특정 속성을 사용한 요소에 적용할 스타일
    • [속성=값] : 특정 값을 갖는 속성에 적용할 스타일
    • [속성 ~= 값 ] : 여러 값 중 특정한 값이 포함된 속성에 적용할 스타일
    • [속성 |= 값] : 특정 값이 포함된 속성에 적용할 스타일
    • [속성 ^= 값] : 특정 값으로 시작하는 속성에 적용할 스타일 
    • [속성 $= 값] : 특정 값으로 끝나는 속성에 적용할 스타일
      • ex) a[href $= "hwp"] // hwp로 끝나면 한글파일 이미지를 적용한다.
    • [속성 *= 값] : 값의 일부가 일치하는 속성에 적용할 스타일

 

  • 가상 클래스 : 사용자의 동작에 반응하는 선택자
    • :link : 방문하지 않은 링크에 스타일 적용
    • :visited : 방문한 링크에 스타일 적용 
    • :hover : 요소 위에 마우스 포인터를 올려놓을 때 적용할 스타일
      • ex) 이미지 위로 마우스 올려놓으면 다른 이미지로 바뀌는 롤오버 효과(rollover)
    • :active : 요소를 클릭 했을 때 적용할 스타일
    • :focus : 웹 요소에 초점이 맞추어 졌을 때 적용할 스타일
    • :nth-child(n) : n번째 자식 요소에 적용할 스타일

 

CSS3와 애니메이션

  • transform : 회전, 이동, 확대, 축소, 왜곡 웹 요소 변형하기
  • transition : 전환 효과 만들기 진행시간, 속도 곡선, 지연 시간 설정
    • ex) 웹 요소의 배경색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것
  • animation : css로 애니메이션 만들기
  • @keyframes : 애니매이션을 만들 때 바뀌는 중간 지점 만들기
반응형

'잡동사니' 카테고리의 다른 글

TOEIC Speaking Part3 빈출 표현  (0) 2020.03.05
TOEIC Speaking 유형 정리 & 템플릿  (0) 2020.03.05
[CSS]CSS 기초  (0) 2020.01.23
[HTML] HTML 태그  (0) 2020.01.22
STT(Speech-to-Text)  (1) 2019.06.02

HTML은 웹 문서의 내용을 맡고, CSS는 웹 문서의 디자인을 담당한다.

스타일과 스타일 시트

 

  • 내부 스타일 시트

: <head>태그과 </head> 태그 안에서 정의해야 하고 <style>태그와 </style> 태그 사이에 작성한다.

 

  • 외부 스타일 시트

: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것

<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">

 

  • 인라인 스타일

: 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

ex)
<p style="color:blue;"> 인라인 스타일 </p>

 

주요 선택자

 

  • 전체 선택자 : 모든 요소에 스타일 적용하기 
* { 속성 : 속성 값; 속성 : 속성 값; ... }

ex) 
* {
	margin: 0;
    padding : 0;
}

 

  • 태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용하기
태그 { 스타일 }

ex)

p {
	font-size:small; // 글자 크기
    font-weight:blod; // 글자 모양
}

 

  • 클래스 선택자 : 특정 부분에 스타일 적용하기
.클래스명 { 스타일 }

ex)
.bluetext{
	color : blue;
}

...

<p class="bluetext"> 클래스 선택자 </p>

 

  • id 선택자 : 특정 부분에 스타일 적용하기

※ 클래스 선택자와 비슷하지만 id 선택자는 딱 한번만 쓸 수 있다.

#아이디명 { 스타일 }

ex)
#container {
	width : 400px;
    height : 200px;
    margin : 0 auto;
}

...

<div id="container"> id 선택자 </div>

 

  • 그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기
이름, 이름 .. { 스타일 }

 ex)
 h1, h2 {
 	text-align:center;
 }

 

캐스캐이딩(Cascading) 스타일 시트(CSS)

: 캐스캐이딩이란 '위에서 아래로 흐르는 스타일 시트'라는 뜻으로, 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

1. 스타일 우선 순위

- (명시도) 인라인 스타일 > id스타일 > 클래스 스타일 > 태그 스타일

- (Source Order) 같은 스타일의 경우, 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

 

2. 스타일 상속

 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.

※ 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.

 

텍스트 관련 스타일

  • font-family : 글꼴을 지정하는 속성
  • font-size : 글자 크기를 지정하는 속성
  • font-weight : 글자 굵기를 지정하는 속성
  • font-sytle : 글자 스타일을 지정하는 속성
  • color : 글자 색을 지정하는 속성
  • text-decotation : 텍스트에 줄 표시하기 / 없애기 ex) 링크에서 생기는 밑줄 없애기
  • text-align : 텍스트 정렬하기
  • text-overflow : 넘치는 텍스트 표기하기
  • list-style : 목록 스타일 지정하기

 

색상과 배경을 위한 스타일

  • background-color : 배경색을 지정하는 속성
  • background-image : 배경 이미지를 지정하는 속성
  • background-repeat : 배경 이미지의 반복 방법을 지정하는 속성
  • background-size : 배경 이미지의 크기를 조절하는 방법
  • background-position : 배경 이미지의 위치를 지정하는 방법
  • background-origin : 배경 이미지의 배치 기준 조절하는 방법
  • background-attachment : 배경이미지의 고정 여부를 지정하는 속성 ex) 화면이 스크롤되더라도 배경 이미지는 고정되게 하기
  • background-size : 배경 이미지의 크기를 조절하는 속성
  • background : 배경을 한꺼번에 지정하는 속성

 

레이아웃을 위한 스타일

  • width, height : 박스 모델의 너비와 높이
    • 속성을 auto 로 설정 시 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동의로 결정됨
  • display : 화면에서 요소가 어떻게 보일지를 결정하는 속성
    • display : flex : 가로 정렬
  • border :  박스 모델의 테두리 - style, width, color, radius, shadow
  • margin : 박스 모델의 마진(요소와 요소 사이의 여백)
  • padding : 박스 모델의 패딩(테두리와 내용 사이의 여백)
  • border-radius : 박스 모델의 모서리를 둥글게 처리

 

CSS 포지셔닝

  • float : 왼쪽이나 오른쪽에 배치
    • 문서 구조 만들기 - header, sidebar, contents, footer ...
  • clear : float 속성 해제
  • positon : 배치 방법 지정
    • fixed 속성 값 : 브라우저 창 기준으로 배치하기 ex) top 버튼 : 스크롤하더라도 정해진 위치에 계속 고정
  • visibility : 요소를 화면에 표시하거나 감추기
    • ex) 팝업창 삭제 시 visible에서 hidden으로 변경하기
  • z-index : 요소의 쌓는 순서 결정
  • column : 다단 편집 
    • 속성 : width(단의 너비), count(단의 개수), gap(단과 단 사이 여백), rule(구분선의 색상, 스타일, 너비), break-after(다단 위치 지정), column-span(여러 단을 하나로 합치기) 
  • border-collapse : 테두리 합치기
  • table-layout : 콘텐츠에 맞게 셀 너비 지정
  • vertical-align : 셀 안에서 수직 정렬
반응형

'잡동사니' 카테고리의 다른 글

TOEIC Speaking 유형 정리 & 템플릿  (0) 2020.03.05
[CSS]CSS 기초1  (0) 2020.01.30
[HTML] HTML 태그  (0) 2020.01.22
STT(Speech-to-Text)  (1) 2019.06.02
LG그램 노트북 공장초기화 실패 해결하기  (2) 2019.06.02

+ Recent posts

티스토리툴바