CONTENTS
HTML Excercise2
레이아웃 태그 연습
Section1 CSS 사용법과 선택자
1.CSS3 개요
2.CSS3 기본 사용법
3. CSS 선언 방식
4. CSS3 선택자
----------------------------------------------------------------------
HTML Excercise2
1.레이아웃 태그 연습
1)nav
(1)<div>, <a>
<html>
<body>
<!-- 방법1 -->
<div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Testimonials</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</body>
</html>
(2)<ul>, <li>, <a>
<html>
<body>
<!-- 네이게이션 메뉴를 만들 때는 <ul>, <li> 그리고 <a> 태그를 조합하는 것이 일반적이고 권장되는 방법
<ul> 태그는 리스트 형태로 항목을 그룹화하는데 적합 -->
<!-- 방법2 -->
<nav>
<ul>
<li><a href="#">Home</li></a>
<li><a href="#">About</li></a>
<li><a href="#">Testimonials</li></a>
<li><a href="#">Blog</li></a>
<li><a href="#">Contact</li></a>
</ul>
</nav>
</body>
</html>
2)header
(1-1)<div>, <a>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="main-logo">MoGo</div>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVISE</a></li>
<li><a href="#">WORK</a></li>
<li> <a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<!-- 방법1 아이콘 텍스트 처럼 인식(인라인)-->
<div>
장바구니
돋보기
</div>
</header>
</body>
</html>
(1-2)<ul>, <li>, <a>
<!-- 방법2 nav로 묶기(링크) -->
<body>
<header>
<div class="main-logo">MoGo</div>
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVISE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div>
<a href="#">장바구니</a>
<a href="#">돋보기</a>
</div>
</nav>
</header>
</body>
<!--
<div> 태그
페이지의 주요 구성 요소를 그룹화하거나 레이아웃을 형성하는데 적합
주요 구성 요소를 감싸는데 널리 사용
<span> 태그
기본적으로 줄의 흐름을 방해하지 않고
주로 텍스트 일부에 스타일을 적용할 때 사용
주요 구성 요소가 아님
-->
(2)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<header>
<h1>STICKY HEADER POW!</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#"></a>Aboout</li>
<li><a href="#"></a>Gallery</li>
<li><a href="#"></a>Contact</li>
</ul>
</nav>
<section>
<div>
<h2>THIS IS SOME STEEZY STUFF</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.~</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.~</p>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.~</P>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.~</P>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.~</P>
</div>
</section>
</body>
</html>
3)section
<body>
<section>
<div>
<h2><i>Creative Tmplate</i></h2>
<h1>WELCOME<br>TO MOGO</h1>
</div>
<div class="line" style="width: 150px; border-bottom: 5px solid black;"></div>
<div>
<a href="#">LEARN MORE</a>
</div>
</div>
</div>
</section>
</body>
4)card
(1)
<html>
<body>
<section>
<div>
<div>
<img src="farm.jpg">
</div>
<div class="product-info">
<!-- Title -->
<h1>Harvest Vase</h1>
<!-- Sub title -->
<h2>BY STUDIO AND FRIEDS</h2>
<P>Harvest Vases are a reinterpretation<br> of peeled fruits~</P>
<div>
<span>78$</span>
<button type="button">BUY NOW</button>
</div>
</div>
</div>
</section>
</body>
</html>
(2)
<html>
<body>
<section>
<div>
<div>
<img src="sky.jpg">
</div>
<div>
<!-- card title, txt, button-->
<h1>Card Grid Layout</h1>
<p>Demo of pixel perfect pure CSS simple responsive card grid layout</p>
<div>
<a href="#">READ MORE</a>
</div>
<!-- <button>Read More</button -->
</div>
</div>
</section>
</body>
</html>
5)홈페이지 레이아웃 태그 연습
---------------------------------------------------------------------
Section1 CSS 사용법과 선택자
1.CSS3 개요
◎CSS3
-스타일 시트 표준안
-웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는데 사용
ex)class, id
◎CSS3의 구성
-선택자(Selector): 스타일 시트를 적용할 대상을 지정
-속성(Property): 어떤 속성을 적용할지 선택
-속성값(Value): 속성에 어떤 값을 반영할지 선택
| h1 │ (선택자) |
{color: blue; font-size: 12px;} │ │ │ │ (속성) (속성값) (속성) (속성값) |
◎CSS1
-웹 문서의 단순한 글꼴, 텍스트 정렬 방식, 마진 등을 정의하는데 사용
◎CSS2
-1998년에 발표되어 거의 모든 브라우저에서 사용
-글꼴 규정 및 현재 사용되고 있는 CSS의 모든 규격 등이 이 버전에서 시작됨
◎CSS3
-Text, fonts, color, backgrounds & borders, transforms, transition, animations과 같은 종류의 모듈을 추가로 지원
-기존의 CSS2가 갖지 못했던 화려하고 역동적인 표현을 추가하여 자바스크립트 같은 서버 특 기술에만 의존하던 영역을 지원
◎문서의 작성과 디자인을 분리
-하나의 웹 문서에서 문서 작성은 HTML이, 디자인은 CSS가 담당
◎디자인을 분리했을 때 장점
-내용과 디자인 수정이 용이
-다양한 기능으로 확장 가능
-통일된 문서 양식 제공
-전송 및 로딩 시간 단축
2.CSS3 기본 사용법
◎CSS의 정의 문법
| (선택자) │ div |
속성 속성값 단위 │ │ │ 선언 블록 시작─{ width: 960px; }─선언 블록 끝 │ │ 콜론 세미콜론 |
| *방법1) /*한 줄로 작성*/ p{color: blue; background-color: yellow;} |
| *방법2) p{/*여러 줄로 작성*/ color: blue; background-color: yeollw; } |
3. CSS 선언 방식
-CSS 작성 방법
1)인라인 스타일 시트: 태그 안에 직접 지정하여 사용
2)내부 스타일 시트: html안에 CSS값, <style> 태그 사용
3)외부 스타일 시트: html <head>...</head>부분에 link태그 사용->해당 '.css' 파일에 연결
*인라인 스타일 시트 적용->내부 스타일 시트 적용->외부 스타일 시트 적용->브라우저 기본 스타일 시트 적용
-하나의 요소에 인라인 스타일 시트기 중복 정의되면 제일 마지막에 설정된 값이 적용
-CSS 적용 우선순위와 상관없이 속성을 강제로 적용할 때는 (!important) 표시 사용
스타일 시트 사용 위치 확인하기
<.html>
<head>
<link>
<!-- 외부 스타일 시트 적용 방법 -->
<link type="text/css" rel="stylesheet" href="01_cssstyle_external.css"></link>
<style>
p2 { /*내부 스타일 시트 적용 방법 */
color: blue;
}
</style>
</head>
<body>
<!-- 인라인 스타일 시트 적용 방법 -->
<p1 style="color: red;">인라인 스타일 시트 적용</p1><br>
<p2>내부 스타일 시트 적용</p2><br>
<p3>외부 스타일 시트 적용</p3><br>
</body>
<.css>
p3 {
color: green;
background-color: yellow;
}
CSS 적용 우선순위 살펴보기
<.html>
(1)
<head>
<!-- 외부 스타일 시트를 정의하는 위치가 중요 -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
<style>
p {color: blue;}
p {color: yellow;}
p {color: red;}
</style>
</head>
<body>
<p>CSS가 중복된 경우 어떤 것이 적용될까?</p>
</body>
(2)
<head>
<style>
p {color: blue;}
p {color: yellow;}
p {color: red;}
</style>
<!-- 외부 스타일 시트를 정의하는 위치가 중요(최종 적용) -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
(3)
<head>
<style>
p{color: blue! important;}
p{color: yellow;}
p{color: red;}
</style>
<!-- 외부 스타일 시트를 정의하는 위치가 중요(최종 적용) -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
<.css>
p {
color: green;
background-color: yellow;
}
3. CSS3 선택자
-CSS의 기본 선택자
| 종류 | 사용 방법 | 설명 |
| 전체 선택자 | *{속성선언;} | 모든 태그에 스타일 적용 *초기화 작업할 때 필요 |
| 타입 선택자 | 태그 {속성선언;} ex)<div>, <p> |
지정한 태그에 스타일을 적용 |
| 클래스 선택자 | .클래스 이름 {속성선언;} *동일하게 같은 이름 |
지정한 클래스에 스타일을 적용 |
| 아이디 선택자 | #아이디 {속성선언;} *중복 사용x |
지정한 클래스에 스타일 적용 |
| 속성 선택자 | [속성] {속성선언;} ex)input [type] [속성=값] {속성선언;} ex)input [type]"radio" |
지정한 속성 또는 속성값이 있는 태그에 스타일을 적용 |
전체 선택자 사용하기
<head>
<style>
*{
color: red;
background-color: yellow;
font-size: 13px;
}
</style>
</head>
<body>
<h1>Universal Selector</h1>
<h2>모두 같은 색상, 같은 크기</h2>
<h3>전체적으로 동시에 스타일 적용</h3>
<p>모든 데이터에 적용</p>
</body>
타입 선택자 사용하기
<head>
<style>
h1{background-color: yellow;}
h2{background-color: green;}
h3{background-color: pink;}
p{color: red}
</style>
</head>
<body>
<h1>Type Selector</h1>
<h2>Type Selector</h2>
<h3>Type Selector</h3>
<p>각 요소에 다르게 적용</p>
</body>
클래스 선택자 사용하기
<head>
<style>
.class1{
color: blue;
background-color: yellow;
}
.class2{
color: red;
background-color: green;
}
h3.class1{
color: navy;
background-color: pink;
}
</style>
</head>
<body>
<h1 class="class1">Class 1 입니다.</h1>
<p class="class1">Class 1 입니다.</p>
<h1 class="class2">Class 2 입니다.</h1>
<p class="class2">Class 2 입니다.</p>
<h3 class="class1">Element+Class Selector</h3>
</body>
아이디 선택자 사용하기
<head>
<style>
#id1 {
color: blue;
background-color: pink;
}
#id2 {
color: blue;
background-color: yellow;
}
h2#id1 {
color: red;
background-color: green;
}
</style>
</head>
<body>
<h1 id="id1">ID1선택자</h1>
<p id="id1">ID1선택자</P>
<h1 id="id2">ID2선택자</h1>
<P id="id2">ID2선택자</P>
<h2 id="id1">Element+ID Selector</h2>
</body>
속성 선택자 사용하기
<head>
<style>
h1[text]{
color: red;
background-color: grey;
}
p[text]{
color: blue;
background-color: yellow;
}
h1[text="attr3"]{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<h1 text="attr1">text 속성 이름 선택자</h1>
<h1 text="attr2">text 속성 이름 선택자</h1>
<p text="attr3">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<p>속성 선택 없음</p>
</body>
'웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 10일차 (24/11/22) (0) | 2024.11.22 |
|---|---|
| 프로그래밍 언어 활용 9일차(24/11/21) (0) | 2024.11.21 |
| 프로그래밍 언어 활용 8일차(24/11/20) (2) | 2024.11.20 |
| 프로그래밍 언어 활용 7일차(24/11/19) (2) | 2024.11.19 |
| 프로그램 언어 활용 6일차(24/11/18) (4) | 2024.11.18 |