25일차 CSS [ 기본태그 ]

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

유정잉

25일차 CSS [ 기본태그 ] 본문

네이버 클라우드 부트캠프/복습 정리

25일차 CSS [ 기본태그 ]

유정♡ 2024. 3. 26. 17:02

[ 블록요소 & 인라인요소 ☆★ ]

※ 블록요소 :

- div, ul, ol, li, p, table, h1~h6 ...

- 크기 값을 지정할 수 있음

- 한줄에 한개만 배치(한줄에 여러개 존재할 수 없음)

- 상하좌우마진 모두 가짐

- 기본 너비값은 100%

※ 인라인요소 :

- span, a, strong, textarea ...

- 크기값을 지정할 수 없음

- 한 줄에 여러개 배치

- 상하마진 못가짐(여백값을 좌우는 가질 수 있음)

- 기본 너비값은 컨텐츠 너비값

<head>

<style>

/* 좌우만 여백 가지고 상하는 여백 못 가짐, width height 적용 안 됨 */

span{

border: 1px solid black;

width: 400px;

height: 100px;

margin: 20px;

}

/* 상하좌우 여백 적용 됨. wigth,height 적용 됨 */

div{

border: 5px solid deeppink;

width: 400px;

height: 100px;

margin: 20px;

padding: 20px;

}

</style>

</head>

<body>

<span>인라인 구성요소...ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ</span><br>

<div>블록 구성요소...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div>

</body>

[ span 태그 ]

- <span> 태그는 단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해 감싸주는 태그입니다. <span> 태그는 자체적으로 특별한 의미가 전혀 없습니다.
- <span>의 "span"이라는 단어는 영어로 "범위" 또는 "간격"을 의미합니다.

- 태그 자체적으로 특별한 의미가 전혀 없지만, 스타일을 적용하기 위한 CSS 선택자로 사용하거나, 자바스크립트에서 특정 부분을 선택하거나 조작하는 데 사용하거나, HTML 속성을 적용하기 위한 "범위"를 나타내기 위해 주로 사용되거나 오직 시각적 스타일을 위한 장식용 태그로 사용됩니다.

- <div></div>는 줄이 바뀜 <span>은 줄이 바뀌지 않음 둘이 역할은 비슷

[ CSS 기본 태그 - 1 style ]

<!DOCTYPE html>

<head>

<style>

body{

background-color: yellow;

}

h3{

color: purple;

}

span{

color: blue; font-size: 30px;

}

</style>

</head>

<body>

<hr>

</body>

</html>

[ CSS 기본 태그 - 2 CSS3 스타일 시트 파일을 불러오는 방법 2 가지 ]

- style.css 파일을 먼저 File-New Text File로 생성해서 거기에 style태그 넣고 href="style.css"로 불러오기

- link 태그를 활용하면 style 태그 필요 없음 그냥 <head></head>사이에 링크만 넣어주면 됨

<head>

<style>

@import url(style.css);

</style>

</head>

- body</body> 태그 안에도 style태그를 넣어 줄 수 있음 (하지만 정말 간단한거 할 때만 가끔 사용 주로 link사용)

<hr>

</body>

[ CSS 기본 태그 - 3 스타일 합치기(cascading)와 오버라이딩(overriding) ]

- 즉, <heda>와 <body>의 우선 순위

밑에 코드를 보면 <head>에서 먼저 p color는 red라고 줬지만 <body>에서 따로 <p color blue>라고 지정을 해주면

<body>의 color가 우선순위로 먹힌다.

<!DOCTYPE html>

<head>

<style>

color: red; font-size: 20px;

}

</style>

</head>

<body>

<p>수면 전문가이자 상담가인 토마스 회그 라이센후스는 "매일 밤 적절한 양의 양질의 수면을 취하는 것이 정신적, 육체적 건강 모두에 큰 도움이 될 수 있다"고 설명했다.</p>

<p style="color: blue;">라이센후스는 나이에 따라 최고의 수면을 취하는 방법을 안내했다.</p>

</body>

</html>

<body>

<p style="color: green;">안녕하세요

<em style="font-size: 25px; color: pink;">자식입니다</em>

</p>

</body>

<!DOCTYPE html>

<head>

<style>

span{

color: blue;

}

</style>

</head>

<body>

나는 <sapn style="color: brown;"><b>'사람들에게 도움을 주는 개발자 입니다.</b></sapn><br>

IT 기술과 실생활에 접목시킨 개발을 하고 있으며 브랜드로 출간하고 있습니다.<br>

사람에게 <span><b>도움</b></span>을 주는 책<br>

열심히 사는 사람들에게 도움이 되고 싶습니다.<br>

</body>

</html>

[ CSS 기본 태그 - 4 셀렉터(selector) class와 id ]

- class 셀렉터는 .으로 접근 가능

- id 셀렉터는 #으로 접근 가능

- 셀렉터 조합하기

<!DOCTYPE html>

<head>

<style>

.bb{background-color: aliceblue;}

.f{color: red;}

#list{background-color: yellow;}

div > strong{

background-color: yellowgreen;

}

#list span{

color: fuchsia;

}

ul em{

color: blue;

}

h2,li{

color: tomato;

}

</style>

</head>

<div>

</ul>

</div>

</body>

</html>

[ CSS 기본 태그 - 5 텍스트를 꾸미는 CSS3 스타일 시트 ]

- text-align: center (가운데 정렬)

- text-align: justify (양쪽정렬, 양쪽들여쓰기) vs margin-left: 50px;

- text-decoration: underline;(아래 밑줄) line-through;(가운데 밑줄,취소선); none(줄없애기); overline(윗줄)

- text-indent: 3em; => 3글자 들여쓰기

<!DOCTYPE html>

<head>

<style>

div{

text-align: center; /* align 정렬 */

}

div span{

text-decoration: underline; /* underline 밑줄 */

text-indent: 3em; /* indent 들여 쓰기 */

}

#a{

text-decoration: line-through; /* line-through 가운데 선 */

}

</style>

</head>

<body>

<div>

<strong id="a"> 뮤지컬 </strong> <span> ‘노트르담 드 파리’ </span> 한국어 버전이 지난 24일 서울 공연을 성황리에 마무리하고 전국 투어에 돌입한다.<br>

제작사 마스트인터내셔널에 따르면 <span>‘노트르담 드 파리’</span>는 서울 74회 공연 동안 약 11만 관객을 동원했다.<br>

작품은 15세기 파리, 아름다운 집시 여인 에스메랄다와 그녀를 사랑하는 세 남자의 사랑 이야기를 다룬다. <br>

프랑스의 대문호 빅토르 위고의 동명 소설을 원작으로 한다.<br>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

h3{text-align: right;}

.p1{text-indent: 4em; text-align: justify;}

span{text-decoration: line-through;}

.p2{text-indent: 1em; /* 한글자 들여쓰기 */

text-align: center;}

strong{text-decoration: overline;}

</style>

</head>

<body>

<hr>

밴드 1, 2, 3 인력 중 근속 15년 이상 직원이 대상이다. 밴드 1은 수석부장, 밴드 2는 부장, 밴드 3은 과장급이다.

신청자에겐 법정퇴직금 외 기본급 40개월치(월 급여 기준 24개월치)의 특별퇴직금, 2500만원의 생활지원금, 직급별 1000만~3000만원의 전직지원금이 지급된다.

</body>

</html>

[ CSS 기본 태그 - 6 폰트를 꾸미는 CSS3 스타일 시트 ]

- <style="font-weight: 900;"> font의 굵기, 진하기

- <style="font-style: italic;"> font의 스타일 글씨체 글꼴 (italic, oblique ..등)

- <style="font-size: 1.5em;"> font의 크기 1.5배 키우기

- font-family: 'Times New Roman', Times, serif; font-family 폰트는 타임뉴로만 타임뉴로만 없으면 타임즈 없으면 세리

- font-style은 폰트 하나만 주는 것 !! font-famliy는 폰트를 세 종류를 주는 것 !!!

<!DOCTYPE html>

<head>

<style>

body{

font-family: 'Times New Roman', Times, serif;

font-size: large;

}

</style>

</head>

<body>

<p style="font-weight: 900;">font-weight 900</p>

<p style="font-weight: 100;">font-weight 100</p>

<p style="font-style: italic;">font-style italic</p>

<p style="font-style: oblique;">font-style oblique</p>

</html>

[ CSS 기본 태그 - 7 CSS3의 박스 모델 ☆★ ]

- Margin: Object와 화면과의 여백(외부여백) Margin은 Border 바깥쪽을 차지한다.

주변 요소와 거리를 두기 위한 영역이다.
- Padding: Object 내의 내부여백 Padding은 Content와 Border 사이의 여백을 나타낸는 영역이다.

Content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다.

즉, Padding 영역도 Content의 연장으로 볼 수 있다.

- padding margin width height

- border-style : solid none hidden dotted double groove(여러 종류 선이 있음)

- border: 테두리두께 테두리선종료 색깔 (border: 3px solid black)

- margin: 0 auto => 위아래는 여백 0 , 좌우는 가운데정렬

Margin과 Padding의 사용법 (마진 중심으로 설명) (보통 2번 방법이 제일 많이 사용 됨)

1. 속성 4개 사용 시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다. 예: margin: 10px 5px 10px 5px
2. 속성 2개 사용 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미한다. 예: margin: 10px 5px
3. 속성 1개 사용 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다.
4. padding 속성 1개 사용 패딩의 1개 속성만 사용할 경우, 안쪽여백이 변경된다. 예: padding: 20px
5. 단일 속성 부여 위, 오른쪽, 아래, 왼쪽 중 하나에만 값을 부여하고 싶은 경우, 하단과 같이 방향을 지정해주면 된다. 예: margin-right: 20px, padding-top: 10px
6. 가운데 정렬 auto를 이용한다. padding은 auto값 선언 불가. 예: margin: auto

<!DOCTYPE html>

<head>

<style>

body{background-color: aqua;}

span{background-color: skyblue;}

div.a{

background-color: yellow;

border-style: solid;

border-color: blueviolet;

width : 150px;

height : 50px;

margin : 40px;

border-width : 30px;

padding : 20px;}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

div{

background-color: yellow;

padding: 30px;

border: 5px dotted black;

margin: 30px;

}

/* padiding 안쪽 여백(마이메로디 사진과 검정점선 사이 여백 30px 크기=노랑색)

border 테두리(검정 점선 5px는 점 크기)

margin 바깥쪽 여백(검정점선과 창테두리 사이 여백 30px 크기=흰색*/

</style>

</head>

<body>

<div>

</div>

</body>

</html>

<body>

</body>

<!DOCTYPE html>

<head>

<style>

div.a{

background-color: black;

padding: 20px;

color: white;

text-align: left;

font-size: 20px;

}

color: red;

text-align: center;

font-weight: 500;

font-size: 20px;

}

span{

color: blue;

text-align: center;

}

body{

text-align: center;

border: 1px solid black; /* 전체 테두리 추가 */

font-size: 14px; /* 전체 글꼴 크기 조정 */

}

</style>

</head>

<body>

<div class="a"><b>확인하세요</b></div>

<b><span>오후 2시 이전</span>주문 건은 당일 발송합니다.<br>

2시 이후 주문건은 다음날 발송합니다.(주말 제외)</b>

<hr>

고객센터로 전화주세요</b>

<hr>

상담시간 : 오전 9시 ~ 오후 6시(토/일,공휴일 휴무)

</body>

</html>

<head>

<style>

div.a{

background-color: black;

color: white;

text-align: center;

height: 90px;

width: 300px;

padding: 3px;

margin: 20px auto;

}

</style>

</head>

<body>

</body>

[ CSS 기본 태그 - 8 CSS3 박스 모델 둥근 모서리 만들기 ]

- border-radius: 0px 10px 20px 30px

왼쪽위 모서리부터 시계방향으로 px가 적용됨. 1&3모서리 짝꿍 !!! 2&4모서리 짝꿍 !!!

- border-style: dotted도 가능 border의 테두리가 점으로 적용 됨

<head>

<style>

background-color: lightpink;

width: 200px;

padding: 20px;

}

#r1{

border-radius: 50px; /*border-radius에서 하나의 값만 지정하면 네모서리 다 적용*/

}

#r2{

border-radius: 0px 20px 40px 60px; /* 네개의 값 지정하면 왼쪽부터 시계방향으로 적용 */

}

#r3{

border-radius: 0px 20px 40px; /* 세개의 값 지정하면 0,20,40,20 된다 왜냐 1+3짝꿍 2+4짝꿍 */

}

#r4{

border-radius: 0px 20px; /* 제일 중요한 방법 1번3번 0px 2번 4번 20px */

}

#r5{

border-radius: 50px; border-style: dotted;

}

</style>

</head>

<body>

</body>

[ CSS 기본 태그 - 9 텍스트 그림자, text-shadow ]

- text-shadow: h(수평) v(수직) blur(번짐) color(색깔 )

color 원래 글짜 색

<head>

<style>

#r1{

text-shadow: 3px 3px; /* h수평그림자 v수직그림자 */

}

#r2{

text-shadow: 3px 3px red; /* 그림자 색깔은 맨뒤에 넣기 */

}

#r3{

text-shadow: 3px 3px 5px skyblue; /* h v 다음 세번짜가 그림자 번짐 */

}

#r4{

text-shadow: 0px 0px 3px black;

color: white;

}

#r5{

text-shadow: 2px 2px 2px black,

0 0 25px blue,

0 0 5px darkcyan; /* 색을 합쳐서 여러개도 줄 수 있음 */

color: yellow;

}

</style>

</head>

<body>

</body>

[ CSS 기본 태그 - 10 마우스 커서 제어, cursor ]

- 글자에 마우스를 갖다대면 마우스의 커서 모양이 바뀌는 태그

<body>

</body>

[ CSS 기본 태그 - 11 박스의 유형 제어 display : block, inline, none... ]

- 위치 지정을 block 형태도 할 수 있다.

블록박스 <div, p, h1> (display:block)
- 항상 새 라인에서 시작함
- 블록 박스 안에만 배치
- 옆에 다른 요소 배치 불가능
- width, height 크기 조절 가능
- padding, margin 조절 가능

인라인박스 <a, span, textarea, input...> (display:inline)
- 새 라인에서 시작 못함(라인 안에 있음)
- 모든 박스 안 배치 가능
- 옆에 다른 요소 배치 가능
- width, height 크기 조절 불가능
- margin-top, margin-bottom 조절 불가능

인라인블록박스 (display:inline-block)
- 새 라인에서 시작 못함 (인라인 특성)
- 모든 박스 안 배치 가능(인라인 특성)
- 옆에 다른 요소 배치 가능 (인라인 특성)
- width, height 크기 조절 가능(블록 특성)
- padding,margin 조절 가능(블록 특성)

<head>

<style>

span{

display : block;

background-color: aquamarine;

width : 100px;

height : 60px;

}

</style>

</head>

<body>

<div>

<span>block span</span>과 <span>block span</span>입니다.

</div>

</body

<head>

<style>

div div {

display : inline;

}

</style>

</head>

<body>

<div>inline DIV</div>

</div>

</body>

<head>

<style>

div{

border: 1px solid salmon;

color: blue;

background-color: yellow;

}

</style>

</head>

<body>

CSS<div style="display: none;">재밌음</div><br>

CSS<div style="display: inline; height: 50px;">재밌음</div><br>

CSS<div style="display: inline-block; height: 50px;">재밌음</div><br>

CSS<span style="display: block;">재밌음</span><br>

</body>

[ CSS 기본 태그 - 11 위치 position ]

1. 정적 위치(static position) 지정 방식

2. 상대 위치(relative position) 지정 방식

3. 고정 위치(fixed position) 지정 방식

4. 절대 위치(absolute position) 지정 방식

※ absolute

: 부모를 찾는다(relative를 찾아야함) => 부모가 있으면 부모 안에서만 움직인다. 행동 기준이 부모가 있는 위치 relative가 있는 부모 태그의 좌측 상단이 기준이 됨

부모 중 relative가 없다 => body 태그 기준으로 움직임

<head>

<style>

div{

display: inline-block; /* C S S 3이 한줄로 뜨게 하는 태그, 크기 조절 가능 */

width: 50px;

height: 50px;

border: 1px solid tomato; /* 경계선(=테두리) 생성 하는 태그 */

text-align: center;

}

#a:hover{ /* 가상 클래스 마우스를 갖다대면 위치가 변경 됨 */

position: relative;

left: 40px;

top: 40px;

background-color: yellow;

}

</style>

</head>

<body>

</body>

<head>

<style>

div{

display: inline-block;

position: absolute;

border: 1px solid salmon;

}

div p{

display: inline-block;

position: absolute; /* 부모위치(마멜사진) 기준으로 JAVA 글씨가 들어감 */

height: 20px;

width: 50px;

background-color: gray;

}

</style>

</head>

<body>

<div>

</div>

</body>

<head>

<style>

#a{

position: fixed; /* 고정된 위치 스크롤을 내리고 창크기를 변경해도 고정 된 위치*/

right: 10px;

width: 100px;

bottom: 200px;

background-color: aqua;

}

</style>

</head>

<body>

<div>

</div>

</body>

<head>

<style>

ul{

list-style: none;

}

ul li{

display: inline-block;

padding: 20px;

margin: 0 20px;

border: 1px solid black;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

[ CSS 기본 태그 - 12 float ]

<style>

#a{

float: left;

border: 1px dotted darkblue;

width: 100px;

}

</style>

</head>

<body>

인공지능(AI)이 본격 산업화되면서 ICT 중심 수출실적 개선이 전망된다. </p>

<p>이에 정부와 산업계는 올해 국내 소프트웨어(SW) 해외 진출을 중점과제로 삼았다.</p>

</body>

[ CSS 기본 태그 - 13 하이퍼링크 꾸미기 ]

- a:visited{ color: pink; }는 링크를 방문한 후 링크 색상 변경

- a:hover{ text-decoration: none;} 는 링크를 방문한 후 밑줄 변경하는 작업 (none, line-through)

- ul{ list-style: none; } list의 ul에 li 마커가 사라지는 작업 (마커=리스트를 나타내는 동그라미 표시)

<head>

<style>

a:visited{ /* 링크를 방문한 후 색상 변경 작업 */

color: palevioletred;

}

a:hover{ /* 링크를 방문한 후 밑줄 없애는 작업 */

text-decoration: none;

}

ul{ /* ul li의 마커가 사라짐 (리스트를 나타내는 동그라미 표시) */

list-style: none;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

[ CSS 기본 태그 - 14 리스트 list 꾸미기, 리스트 배경색 입히기, 마커의 위치, 마커의 종류 ]

- padding : 10px 10px 10px 50px위 오른쪽 아래 왼쪽 순서대로 돌아감

- list-style-position: inside; 사진에선 마커가 바깥에 위치하지만 이 태그를 이용하면 마커가 안으로 이동

- list-style-type: circle; 마커 종류 변경

- list-style-image : url("media/marker.png"); 이미지 마커로 변경

- display-inline; 리스트 종류 일자로 표시

<head>

<style>

ul {

background : goldenrod;

padding : 10px 10px 10px 50px; /* 위 오른쪽 아래 왼쪽 순서대로 */

}

ul li { /* ul의 자손 li */

background : greenyellow;

margin-bottom : 5px;

list-style-position: inside;

}

</style>

</head>

<body>

<ul>

<li>Espresso</li>

<li>Cappuccino</li>

<li>Cafe Latte</li>

</ul>

</body>

<head>

<style>

#menu{

background-color: salmon;

}

#menu > ul{ /* 부등호 생략 가능 */

margin: 0;

padding: 0;

width: 600px;

}

#menu ul li{ /* 부등호 생략 버전 */

display: inline;

list-style-type: none; /* 마커 생략 none */

padding: 0px 20px; /* 위 오른쪽 아래 왼쪽 / 위&아래 오른쪽&왼쪽 짝꿍 */

}

#menu ul li a{

color: aqua;

text-decoration: none;

}

#menu ul li a:hover{

color: chartreuse; /* 커서 올려두면 색상 변경되는 작업 */

}

</style>

</head>

<body>

<ul>

<li><a href="#">Espresso</a></li>

<li><a href="#">Cappuccino</a></li>

<li><a href="#">Cafe Latte</a></li>

</ul>

</div>

</body>

[ CSS 기본 태그 - 15 표 table 테이블 꾸미기 ]

- tbody tr:nth-child(odd){ background-color: palegreen; } => 첫번째 자식만 홀수행(=odd)만 색상 변경 / even은 짝수행

- table{ border: 1px solid blue; border-collapse: collapse; } => 테두리 합치는 작업

- text-align: right => 오른쪽 정

<head>

<style>

table{

border: 1px solid blue;

border-collapse: collapse; /* 테두리 합치는 작업 */

}

th{

height: 40px;

width: 100px;

}

td{

height: 40px;

width: 100px;

}

th, td{

border:1px dotted tomato;

}

tr:hover{

background-color: pink;

}

tbody tr:nth-child(odd){ /* 첫번째 자식만 홀수행(=odd)만 색상 변경 / even은 짝수행 */

background-color: palegreen;

}

</style>

</head>

<body>

<table>

<thead>

</thead>

<tfoot>

</tfoot>

<tbody>

<tbody>

</table>

</body>

[ CSS 기본 태그 - 16 ]

[ CSS 주석 처리 방법 ]

/* 주석 처리 할 내용 */

[ 복습 ]

<!DOCTYPE html>
<head>
     <style>
          span{
               color: blue;
          }
     </style>
</head>

<body>
     <h5>회사 소개</h5>
     <span style="background-color: black; color: white;">
          <b>"사람을 도와주는 책"</b></span><br>

     나는 <sapn style="color: brown;"><b>'사람들에게 도움을 주는 개발자 입니다.</b></sapn><br>

     IT 기술과 실생활에 접목시킨 개발을 하고 있으며 브랜드로 출간하고 있습니다.<br>

     <span><b>나의 미션</b></span><br>

     사람에게 <span><b>도움</b></span>을 주는 책<br>

     열심히 사는 사람들에게 도움이 되고 싶습니다.<br>

     <span> 개발의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 개발자. 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.</span>
 </body>
</html>

<!DOCTYPE html>
<head>
     <style>
          .bb{background-color: aliceblue;}
          .f{color: red;}
          #list{background-color: yellow;}
          div > strong{
               background-color: yellowgreen;
          }
          #list span{
               color: fuchsia;
          }
          ul em{
               color: blue;
          }
          h2,li{
               color: tomato;
          }
     </style>
</head>

<!-- body안에 class로 접근 .bb .f로 접근 가능 -->
<body class="bb">
     <h2>셀렉터</h2>
     <div>
          <div>3월 <strong>학습내용</strong></div>
          <!-- id 셀렉터 #으로 접근-->
          <ul id="list">
               <li><span>HTML5</span></li>
               <li><em>Data Base</em></li> <!-- em 태그는 글씨가 살짝 기울어짐 -->
               <li>Java</li>
          </ul>
          <div class="f">과락은 F !!!</div>
     </div>
</body>

</html>

<!DOCTYPE html>
<head>
     <style>
          h1 { 
               color: blue;
          }
          span {
               color: pink;
          }
     </style>
</head>

<body>
     <h1>웹 프로그래밍</h1>
     <details>
          <summary>웹의 목적</summary>
          <span><p>웹의 기본 목적은 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.</p></span>
     </details>
     <details>
          <summary>왜 Web인가?</summary>
     <span><p>전 세계의 컴퓨터들은 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고 받을 수 있다.</p></span>
     </details>
     <details>
          <summary>웹 페이지를 구성하는 3가지 요소</summary>
     <p>
          <ul>
               <li>HTML - 문서의 구조와 내용</li>
               <li>CSS(Casading Style Sheet) - 문서의 모양</li>
               <li>Javascript - 행동 및 응용 프로그램</li>
          </ul>
     </p>
     </details>

</body>
</html>

---------------------------------------
<!DOCTYPE html>
<head>
     <title>Document</title>
</head>

<body>
     <h1>도형 서식 폼 만들기</h1>
     <hr>
     <form>
          <fieldset>
               <legend>도형 서식 입력</legend>

               <ul>
               <li>
                    <label>선 종류</label>
                         <select>
                         <option>실선</option>
                         <option>점선</option>
                         </select>
               </li>

               <li>
               <label>선 두께</label>
                    <input type="number" min="1" max="10" />
               <label>선 색</label>
                    <input type="color" />
               </li>

               <li>
               <label>투명도(0~100):</label>
                    <input type="range" min="0" max="100" />
               </li>
               </ul>
     </form>
</body>
</html>

<!DOCTYPE html>
<head>
     <style>
          div.a{
               background-color: black;
               padding: 20px;
               color: white;
               text-align: left;
               font-size: 20px;
          }
          p{
               color: red;
               text-align: center;
               font-weight: 500;
               font-size: 20px;
          }
          span{
               color: blue;
               text-align: center;
          }
          body{
               text-align: center;
               border: 1px solid black;  /* 전체 테두리 추가 */
               font-size: 14px; /* 전체 글꼴 크기 조정 */
          }
     </style>
</head>

<body>
     <div class="a"><b>확인하세요</b></div>
     <p><b>주문 및 배송</b></p>
     <b><span>오후 2시 이전</span>주문 건은 당일 발송합니다.<br>
      2시 이후 주문건은 다음날 발송합니다.(주말 제외)</b>
      <hr>

      <p><b>교환 및 환불</b></p>
      <b>불만족시 <span>100% 환불</span>해 드립니다.<br>
      고객센터로 전화주세요</b>
      <hr>

      <p><b>고객 센터</b></p>
      <b>0000-0000</b><br>
      상담시간 : 오전 9시 ~ 오후 6시(토/일,공휴일 휴무)
      <br><br>

</body>
</html>

<!DOCTYPE html>
<html>
     <head>
          <style>
               #header {
                    background-color: indigo;
                    padding: 20px;
               }
               #header strong {
                    font-size: x-large;
                    margin: 125px;
               }
               div dl dt {
                    font-weight: bold;
                    color: indigo;
               }

               #div3 {
                    border-radius: 20px 0px;
                    border:5px solid green;
                    margin-top: 10px;
                    margin-bottom: 10px;
               }
</style>
</head>

<body>
     <div id="header">
          <strong>애완견 종류</strong> 애완견 종류 입양하기 건강돌보기 더불어살기
     </div>
     <div id="div3"><br>
          <strong>활달한 강아지</strong>
     <dl>
          <dt>요크셔 테리어</dt>
               <dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
          <dt>말티즈</dt>
               <dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
          <dt>포메 라이언</dt>
               <dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</dd>
          <dt>골든 리트리버</dt>
          <dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
     <dl>
     </div>
</body>
</html>

<head>
	<style>	
          section{
               width: 500px;
               margin: 0 auto;
          }
          p{
               line-height: 20px; /* 글과 글 사이 높이 간격*/
               font-size: 15px;
          }
          article{
               float: left; /* float 속성 웹요소를 문서 위에 떠있게 만드는 것! 왼쪽이나 오른쪽으로 배치하기 none */
               width: 300px;
               height: 200px;
               padding: 20px;
               border: 1px solid gray;
          }
          footer{
               clear: left; /* clear 속성은 float 속성 해제하는 역할 both*/
          }
	</style>
</head>

<body>
     <section>
       <h2>강아지 용품 준비하기</h2>
       <article>  
         <h3>강아지 집 </h3>
          <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
       </article>
   
       <article>
         <h3>강아지 먹이 </h3>
         <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
       </article>
   
       <article>
         <h3>밥그릇, 물병 </h3>
         <p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
       </article>
   
       <article>
         <h3>이름표, 목줄</h3>
         <p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
       </article>
   
       <footer>
         <p>boxmodel 연습하기</p>
       </footer>
      </section>
</body>

<!DOCTYPE html>

<head>
     <style>
          legend{
               color: purple;
               font-weight: bold;
          }
          .a{
               font-weight: bold;
               float: left;
               width: 90px;
               margin-left: 50px;
          }
          .b{
               margin:0 auto;
               width: 500px;
          }
          .c{
               text-align: center;
          }
          .d{
               margin-left: 50px;
          }
          div{
               margin-bottom: 10px;
          }
     </style>
</head>

<body>
     <div class="b">
     <h1>상품 주문서</h1>
     <fieldset>
          <legend>개인 정보</legend>
     <div>
          <label for="name" class="a">이름</label>
          <input type="text" id="name" placeholder="여백없이 입력"></div>

     <div>
          <label for="tel1" class="a">연락처</label>
          <input type="tel" id="tel1" placeholder="연락가능한 번호"></div>
     </fieldset>

     <fieldset>
          <legend>배송지 정보</legend>
          <div><label for="adr" class="a">주소</label>
          <input type="text" id="adr" size="30"></div>

          <div><label for="tel2" class="a">전화번호</label>
          <input type="tel" id="tel2"></div>

          <div>
          <label for="msg" class="a">메모</label>
          <textarea cols="30" rows="3" id="msg"></textarea>
          </div>
          </fieldset>

     <fieldset>
          <legend>주문 정보</legend>
               <div class="d"> <label><input type="checkbox">과테말라 안티구아 (100g)</label>
               <label><input type="number" value="5" min="0" max="5">개</label></div>

               <div class="d"> <label><input type="checkbox">인도네시아 만델링 (100g)</label>
               <label><input type="number" value="5" min="0" max="5">개</label></div>

               <div class="d"><label><input type="checkbox">탐라는도다(블렌딩) (100g)</label>
               <label><input type="number" value="5" min="0" max="5">개</label></div>
     </fieldset>

     <div class="c">
          <input type="submit" value="주문하기">
          <input type="reset" value="다시 작성"></div>
     </div>
</body>
</html>

<head>
     <style>
          label{
               display: block;
               padding: 10px;
          }
          label span{
               float: left;
               width: 80px;
          }
          input[type=text] {
               color: red;
          }
          input:hover, textarea:hover{
               background-color: pink;
          }
     </style>
</head>
<body>
     <form>
          <label>
               <span>Name</span>
               <input type="text" placeholder="Gildong"><br>
          </label>
          <label>
               <span>Email</span>
               <input type="email" placeholder="Gildong@naver.com"><br>
          </label>
          <label>
               <span>Msg</span>
               <textarea placeholder="메세지를 남겨줘"></textarea>
          </label>
          <label>
               <span></span>
               <input type="submit" value="전송"><br>
          </label>
     </form>
</body>

[ 이론 ]

[ CSS(Cascading Style Sheet) ]
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
- CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름
- 현재 CSS3 : CSS level 3 : CSS1 -> CSS2 -> CSS3 -> CSS4(현재 표준화 작업 중)

[ CSS3의 기능 ]
- 색상과 배경, 텍스트, 폰트, 박스 모델(Box Model), 비주얼 포맷 및 효과, 리스트, 테이블, 사용자 인터페이스

[ CSS3 스타일 시트 구성 ]

예) <span> 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일시트

셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
프로퍼티 : 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음
값 : 프로퍼티의 값
주석문 : 스타일 시트 내에 붙이는 설명문으로 /* ... */. 여러 줄, 아무 위치에나 사용 가능
대소문자 구분 없음 : body { background-color : mistyrose; } / BODY { Background-Color : Mistyrose; }

[ HTML 문서에 CSS3 스타일 시트 만드는 방법 3 가지 ]
1) <style></style> 태그에 스타일 시트 작성
2) style 속성에 스타일 시트 작성
3) 스타일 시트를 별도 파일로 작성 : <link> 태그나 @import로 불러 사용

[ <style> 태그에 스타일 시트 만들기 ]

<head>
<style>
body { background-color : mistyrose; }
h3 { color : purple; }
</style>
<style>
hr { border : 5px solid yellowgreen; }
span { color : blue; font-size : 20px; }
</style>
</head>

- <style> 태그는 <head> 태그 내에서만 사용
- <style> 태그는 여러 번 작성 가능
- 스타일 시트들이 합쳐 사용
- <style> 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용

- HTML 태그의 style 속성에 CSS3 스타일 시트 작성
- 해당 태그에만 스타일 적용

[ 외부 스타일 시트 파일 불러오기 ]
※ css 파일에 스타일 시트 저장

- 웹 페이지에서 CSS3 스타일 시트 파일을 불러 사용

: 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소웹 사이트의 전체 웹 페이지 모양의 일관성 확보
<style> /* mystyle.css */
body { background-color:linen; color:blueviolet; margin- left:30px; margin-right:30px; }
h3 { text-align:center; color:darkred; }
</style>
※ CSS3 스타일 시트 파일을 불러오는 방법 2 가지
1) <link> 태그 이용
<head>
<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>
2) @import 이용
<style>
@import url(mystyle.css);
/* @import url(‘mystyle.css’); 로 해도 됨 */
/* @import “mystyle.css”;로 해도 됨 */
</style>

[ CSS3 규칙 – 스타일 상속 ]
※ CSS3 스타일은 부모 태그로부터 상속
- 부모 태그(부모 요소) : 자신을 둘러싸는 태그
예) <p style="color:green">안녕하세요
<em style=“font-size:25px”>자식입니다</em>
</p>
- <p> 태그는 <em>의 부모 태그
- <em> 태그의 출력 : 글자 크기는 25px, 글자 색은 부모 <p> 태그를 상속받아 green

[ CSS3 규칙 – 스타일 합치기와 오버라이딩 ]
※ 태그에 적용 가능한 스타일
- 브라우저의 디폴트 스타일
- 스타일 시트 파일에 선언된 스타일
- <style></style> 태그에 선언된 스타일
- style 속성에 선언된 스타일
※ 스타일 합치기(cascading)와 오버라이딩(overriding)이란?
- 태그에 적용되는 모든 스타일이 합쳐지고, 동일한 스타일은 순위가 높은 스타일이 우선 적용되는 규칙

우선 순위 확인 : style속성 > style > external.class > 브라우저디폴트스타일

[ 셀렉터(selector) ]
HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능 : 여러 유형의 셀렉터
예) 웹 페이지의 모든 <h3> 태그에 color:brown 스타일을 적용하는 셀렉터 h3를 만든 사례

※ 태그 이름 셀렉터
태그 이름이 셀렉터로 사용되는 유형
셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용

※ class 셀렉터 : 점(.)으로 시작하는 이름의 셀렉터, HTML 태그의 class 속성으로만 지정 가능

body.main { background : aliceblue; } 태그에만 적용 가능

※ id 셀렉터 : #으로 시작하는 이름의 셀렉터, HTML 태그의 id 속성으로만 지정 가능

div#etc { background : mistyrose; } 셀렉터는 다음 사용 불가능 </p id="etc">안녕하세요</p>

[ 셀렉터 조합하기 ]
2 개 이상의 셀렉터 조합 : 조합에 적합한 HTML 태그에만 적용
자식 셀렉터(child selector) : 부모 자식 관계인 두 셀렉터를 ‘>’ 기호로 조합
예) div > strong { color : dodgerblue; } : <div>의 직계 자식인 <strong>에 적용되는 스타일 시트
자손 셀렉터(descendent selector) : 자손 관계인 2 개 이상의 태그 나열
예) ul strong { color : dodgerblue; } : <ul>의 자손 <strong>에 적용되는 스타일 시트

[ 전체 셀렉터와 속성 셀렉터 ]
전체 셀렉터(universal selector) : 와일드 문자(*)를 사용하여 모든 태그에 적용시키는 셀렉터
예) * { color : green; } : 웹 페이지의 모든 태그에 적용. 텍스트 색을 green으로 칠함

속성 셀렉터 : HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터
예) input[type=text] { color : red; } : type 속성값이 “text”인 <input> 태그에 적용 <input type=“text”>스타일 시트

[ 가상 클래스(pseudo-class) 셀렉터 ]
어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터, 40개 이상의 많은 가상 클래스 셀렉터 있음
예1) a:visited { color : green; } : 방문한 <a>의 링크 텍스트 색을 green으로 출력
예2) li:hover { background : yellowgreen; } : <li> 태그에 마우스가 올라오면, yellowgreen을 배경색으로 출력, 내려가면 복귀

[ :firstletter와 :hover의 사용 사례 ]

[ CSS3에서 색 표현 ]

- f12로 개발자 도구를 열어서 원하는 색상을 스포이드로 가져올 수 있음

[ CSS3의 표준 색 이름과 코드 중 일부(총 140개) ]

[ 색 관련 프로퍼티 ]

[ 텍스트를 꾸미는 CSS3 스타일 시트 ]

- text-align 가장 많이 사용 됨

[ CSS3의 표준 단위 ]

[ CSS3 폰트 ]

[ 폰트 제어 CSS3 프로퍼티 ]

[ 단축 프로퍼티, font ]

[ CSS3의 박스 모델 ☆★ ]

※ CSS3의 박스 모델 구성 : 웹사트에서 f12를 통해서도 박스 구성을 확인할 수 있음.

콘텐츠 : HTML 태그의 텍스트나 이미지가 출력되는 부분
패딩 : 콘텐츠를 직접 둘러싸고 있는 내부 여백
테두리 : 패딩 외부의 테두리로서, 직선이나 점선 혹은 이미지로 테두리를 그릴 수 있음
여백 : 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래위 이웃 태그의 박스와의 거리

<div> 영역의 박스 구성이 보이지 않 지만, 사실 박스로 구성되어 있음

[ 박스의 유형 제어 display ]

[ 박스의 배치 position]

※normal flow : 웹 페이지에 나타난 순서대로 HTML 태그 배치, position 프로퍼티를 이용하여 normal flow 무시 가능
※position 프로퍼티를 이용한 배치 방법
정적 배치 - position : static(디폴트)
상대 배치 - position : relative
절대 배치 - position : absolute
고정 배치 - position : fixed
유동 배치 - float : left 혹은 float : right
※position 프로퍼티를 사용할 때, 태그의 위치와 크기
top, bottom, left, right, width, height 프로퍼티로 지정 : 이들 프로퍼티는 배치 방법에 따라 다르게 사용됨

상대 배치position : relative /normal flow의 본위치; 에서 left, top, bottom, right 프로퍼티의값만큼 이동한 상대위치'에 배치

[ 폼 꾸미기 ]

코딩의 시작, TCP School

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

728x90

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

27일차 JavaScript [ 출력, 함수 ] (0)	2024.03.28
26일차 CSS [ 배치, 플렉스 박스 ] (0)	2024.03.27
24일자 HTML < 기본 태그, Visual Studio Code > (0)	2024.03.25
23일차 JDBC [ DB MySQL과 eclipse 연동 ] (22일차와 연결해서 보기) (1)	2024.03.22
22일차 MySQL [ DB 총정리, 면접 준비, 변수선언 set @, IF문, while문 ] (0)	2024.03.21

'네이버 클라우드 부트캠프/복습 정리' Related Articles

유정잉

25일차 CSS [ 기본태그 ] 본문

25일차 CSS [ 기본태그 ]

[ 복습 ]

[ 이론 ]

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

티스토리툴바