#1. 크롬 개발자 도구
- 단축키 (F12)
- Computed 탭
현재 요소 스타일이 더 보기 좋게 나옵니다.
Group 체크박스를 클릭하면 한층 더 깔끔하게 스타일 속성을 확인할 수 있습니다.
- Network 탭
현재 탭에 있는 웹 브라우저 네트워크 분석현황을 볼 수 있습니다.
서버로 부터 요청한 파일을이 어떤 순서대로 응답받는지 나오고, 해당 내용도 살펴볼 수 있습니다.
응답받은 파일을 종류별로도 확인할 수 있습니다.
- Application 탭
스토리지와 쿠키를 확인해 볼 수 있습니다.
스토리지는 웹 브라우저가 프로토콜별(간단하게 웹주소)로 데이터를 저장할 수 있는 공간입니다.
쿠키는 서버에서 웹브라우저에게 전송하는 작은 데이터 조각입니다.
#2. 웹을 구성하는 요소
- HTML(정보 또는 설계도) CSS(디자인 또는 스타일링) Javascript(기능과 효과)
- 웹사이트 제작시 고려 사항
1) 웹 표준
웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
2) 웹 접근성
장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
3) 크로스 브라우징
모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
#3. HTML 기본 태그
- HTML이란? 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
- <!DOCTYPEhtml> : HTML5라는 신조어로 문서를 선언하는 태그
- <head> : 웹 사이트의 간단한 요약 정보를 담는 영역. 웹 사이트에서 노출되지 않는 정보
- <body> : 웹 사이트에서 눈에 보이는 정보를 담는 영역. 이미지나 텍스트처럼 출력되는 정보
- <meta charset="UTF-8"> : 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
- <p> : 본문 내용을 표현. 웹 사이트의 중요 정보를 담는 태그
- <a>
1) 텍스트, 이미지를 클릭했을 때 다른 웹 페이지로 이동시키는 기능
<a href="https://academy.elice.io/" target="_blank">엘리스</a>2) href : 연결할 웹 페이지의 URL 주소
3) target : 웹 페이지를 연결하는 방식
- <ol> : 순서가 있는 리스트
- <ul> : 순서가 없는 리스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<h1 style="color:navy">안녕 엘리스!</h1>
<a href="https://www.naver.com" target="_blank">네이버</a>
<img src="elice_logo.png" alt="엘리스 회사 로고">
<p>동해물과 백두산이 마르고 닳도록...</p>
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<ul>
<li><a href = " ">홈</li>
<li><a href = " ">회사 소개</li>
<li><a href = " ">연락처</li>
</ul>
</body>
</html>#3. 구조를 잡을 때 사용하는 태그
- <header> : 웹 사이트의 머리글을 담는 공간
- <nav> : 메뉴 버튼을 담는 공간
- <main> : 문서의 주요 내용을 담는 태그. IE는 지원하지 않으므로 role="main" 속성 필수 입력
- <article> : 문서의 주요 이미지나 테스트 등의 정보를 담고 구역을 설정하는 태그. 태그 안에 <h#> 태그 필수
- <footer> : 가장 하단에 들어가는 정보를 표기할 때 사용
- <div> : 임의의 공간을 만들 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스 :: elice</title>
</head>
<body>
<header>
<h1><img src="elice_logo.png" alt="앨리스 로고"></h1>
<nav>
<li><a href="#">홈</a></li>
<li><a href="#">회사 소개</a></li>
<li><a href="#">연락처</a></li>
</nav>
</header>
<main role="main">
<article>
<h2>회사 소개</h2>
<p>
회사 소개와 관련된 본문 내용
</p>
</article>
</main>
<footer>
<div>
<p>서울시 서초구</p>
</div>
<div>
<p>010-111-2222</p>
</div>
</footer>
</body>
</html>#4. HTML 태그의 두 가지 성격
- Block 요소 (<p>, <h#> 등)
1) y축 정렬 형태로 출력 (줄바꿈 현상이 나타남)
2) 공간을 만들 수 있고, 상하 배치 작업 가능 (width, height 설정 가능)
- Inline 요소 (<a> 등)
1) x축 정렬 형태로 출력 (한 줄에 출력)
2) 공간을 만들 수 없고, 상하 배치 작업 불가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Block, Inline</title>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<a>Bye</a>
<a>Bye</a>
<a>Bye</a>
</body>
</html>#5. CSS
- CSS 구성 요소 : 선택자 {속성 : 속성값;}
- 선택자 : 디자인을 적용할 HTML 영역. HTML의 어떤 요소에 CSS를 적용 할 것인가
1) Type (HTML 태그)
<style>
h1 {color: red;}
</style>2) Class (HTM 태그 별명)
<!-- <h2 class="coding"> Hello World </h2> -->
<style>
.coding {color: red;}
</style>3) ID (HTML 태그 이름)
<!-- <h2 id="coding"> Hello World </h2> -->
<style>
#coding {color: red;}
</style>- CSS 연동 방법
1) Inline Style Sheet
<h1 style="color: red;"> coding 101 </h1>2) Internal Style Sheet
<head>
<style>
h1 {backgroung-colorL yellow;}
</style>
</head>3) External Style Sheet
<head>
<link rel="stylesheet" href="style.css">
</head>- 부모 자식 형제 관계
# 6. 캐스케이딩
- CSS를 적용하는 우선순위
- CSS의 우선순위를 결정하는 세 가지 요소
1) 순서
p {color: red;}
p {color: blue;}나중에 적용한 속성값의 우선순위가 높으므로 p태그 속 컨텐츠는 blue로 표기된다.
2) 디테일
header p {color: red;}
p {color: blue;}더 구체적으로 작성된 선택자의 우선순위가 높으므로 header 속 p 태그 속 컨텐츠는 red로 표기된다.
3) 선택자
style (Inline Style Sheet) > id > class > type 순으로 우선순위가 높다.
#7. CSS 주요 속성
- width (고정값 : %, 가변값 : px), height
- border (특정 공간의 테두리 값)
1) border-style : 실선 (solid), 점선 (dotted)
2) border-width : 테두리의 두께 (px를 주로 사용함)
3) border-color : 테두리의 색깔
4) 한 줄로 작성 가능 (쉼표는 사용 X)
.paragraph {
width: 500px;
height: 500px;
border: solid 10px red;
}
#8. 박스 모델
- margin과 padding 작성 방법 : top right bottom left 순서로 한 줄에 작성 가능
div {margin: 100px 0 0 100px;}-형제지간의 마진 병합
.box1 {margin-bottom: 150px;}
.box2 {margin-top: 100px;}숫자가 큰 값으로 병합되므로 공유하는 margin이 150px로 설정된다 (250px).
- 부모 자식간의 마진 병합
<main role="main">
<article>
</article>
</main>article {
width:200px;
height: 200px;
margin-top: 100px;
}자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미친다.
- https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin
마진 병합 현상(Margin Collapsing)
마진의 병합현상과 의도하지 않은 마진병합현상을 제거하는 방법에 대한 정리
velog.io
#9. Block 요소와 Inline 요소
- Block
1) <p>, <div> 태그가 대표적
2) 줄바꿈 현상이 나타남 (y축 정렬)
3) width, height 값 사용 가능 (공간 만들기 가능)
4) margin 과 padding 값 사용 가능 (상하 배치 작업 가능)
- Inline
1) <a>, <span> 태그가 대표적
2) x축 정렬
3) width, height 값 사용 불가능
4) margin 과 padding 값 사용 불가능
- inline-block
1) x축 정렬
2) width, height 값 사용 가능 (공간 만들기 가능)
3) margin 과 padding 값 사용 가능 (상하 배치 작업 가능)
#10. 레이아웃에 영향을 미치는 CSS 속성
- float : 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
- clear
1) float에 대한 속성을 제어하고자 할 때
2) clear의 속성값 both는 float: right과 float: left 두 속성값 모두 제어하겠다는 의미입니다. 따라서 만약 float:left만 사용되었다면, clear:left를 써도 됩니다.
#11. 쇼핑몰 만들기
- 쇼핑몰 상단 영역 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 상단 만들기</title>
<link rel="stylesheet" href="index.css">
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 960px;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#intro {
width: 100%;
height: 80px;
}
#intro h1 {
float: left;
width: 50%;
height: 80px;
background-color: #fbfbfb;
}
#intro h1 a {
display: block;
padding: 22px 0 0 30px;
font-size: 30px;
}
#intro nav {
float: right;
width: 50%;
height: 80px;
background-color: pink;
}
#intro nav ul li {
width: 33.33333%;
height: 80px;
float: left;
text-align: center;
line-height: 80px;
}
#intro nav ul li.one {
background-color: #efeff6;
}
#intro nav ul li.two {
background-color: #dcdcec;
}
#intro nav ul li.three {
background-color: #cbcae3;
}
#intro nav ul li a {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<header id="intro">
<h1>
<a href="https://academy.elice.io/">엘리스 사전</a>
</h1>
<nav>
<ul>
<li class="one"><a href="#">캐릭터 소개</a></li>
<li class="two"><a href="#">줄거리</a></li>
<li class="three"><a href="#">부록</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>- 쇼핑몰 본문 영역 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 본문 만들기</title>
<link rel="stylesheet" href="index.css">
<style>
#main article {
width: 50%;
height: 320px;
float: left;
}
#main article a {
display: block;
width: 100%;
height: 100%;
}
#main article.one {
background-color: #532fa1;
}
#main article.two {
background-color: #a44789;
}
#main article.three {
background-color: #3ab6bc;
}
#main article img {
width: 100%;
}
#main article h2 {
color: #fff;
font-size: 25px;
text-align: center;
padding: 10px 0;
}
#main article.text {
width: 100%;
height: 66px;
}
#main article.text p {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px 0;
border: solid 1px #000;
}
</style>
</head>
<body>
<div class="container">
<header id="intro">
<h1>
<a href="https://academy.elice.io/">엘리스 사전</a>
</h1>
<nav>
<ul>
<li class="one"><a href="#">캐릭터 소개</a></li>
<li class="two"><a href="#">줄거리</a></li>
<li class="three"><a href="#">부록</a></li>
</ul>
</nav>
</header>
<main role="main" id="main">
<article class="one">
<a href="#">
<img src="image1.png" alt="White Rabbit">
<h2>하얀토끼</h2>
</a>
</article>
<article class="two">
<a href="#">
<img src="image2.png" alt="Cheshire Cat">
<h2>체셔 고양이</h2>
</a>
</article>
<article class="three">
<a href="#">
<img src="image3.png" alt="Queen of Hearts">
<h2>하트여왕</h2>
</a>
</article>
<article class="one">
<a href="#">
<img src="image4.png" alt="Mad Hatter">
<h2>모자장수</h2>
</a>
</article>
<article class="text">
<p>엘리스에 오신 여러분 환영합니다! :)</p>
</article>
<article class="two">
<a href="#">
<img src="image5.png" alt="Dodo">
<h2>도도새</h2>
</a>
</article>
<article class="three">
<a href="#">
<img src="image6.png" alt="Caterpillar">
<h2>애벌레</h2>
</a>
</article>
<article class="one">
<a href="#">
<img src="image7.png" alt="Card Soldier">
<h2>카드병정</h2>
</a>
</article>
<article class="two">
<a href="#">
<img src="image8.png" alt="Golden Key">
<h2>황금열쇠</h2>
</a>
</article>
</main>
</div>
</body>
</html>- 쇼핑몰 하단 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 하단 만들기</title>
<link rel="stylesheet" href="index.css">
<style>
#footer {
clear: both;
width: 100%;
height: 80px;
background-color: #f9f9f9;
}
#footer .copyright {
float: left;
width:50%
}
#footer .address {
float: right;
width: 50%;
}
#footer .copyright p {
font-size: 14px;
color: #999;
padding: 32px 0 0 40px;
}
#footer .address p {
font-size: 14px;
color: #999;
padding: 32px 40px 0 0;
text-align: right;
}
</style>
</head>
<body>
<footer id="footer">
<div class="copyright">
<p>Copyright © 2016-2020 elice. All rights reserved.</p>
</div>
<div class="address">
<p>대전광역시 유성구 문지로 193 KAIST 문지캠퍼스 진리관 T326호</p>
</div>
</footer>
</body>#이해안가는 것
모듈과 컴포넌트의 차이
'앨리스 SW 엔지니어 트랙 > 1주차' 카테고리의 다른 글
| Day 2 (0) | 2023.03.01 |
|---|