2차시 - 화면구성
html 태그 살펴보기
필수 태그
html 태그
<!DOCTYPE html> html5 문서임을 선언해주는 태그입니다.
head 태그
meta link style 등 직접적이진 않지만 문서에 특성을 나타내거나 영향을 주는 내용들을 넣습니다.
body 태그
페이지를 열었을 때 직접적으로 보여지는 화면입니다.
head안에 내용들
meta 태그
<meta>는 사이트가 보여지는것엔 직접적인 영향을 주진 않지만 페이지의 특징등 문서 자체에 특성을 나타냅니다.
style 태그
<style>는 css style내용을 작성하는 태그인데 본 과정에서는 <link>태그로 파일을 분리해서 작성할 예정입니다.
link 태그
<link>는 현재 보여지는 문서와 다른 문서들을 연결 시켜줍니다. css파일, 웹폰트 등을 연결시켜줍니다.
script 태그
<script> javacript 코드를 작성하거나 javacript 파일을 연결 시켜줍니다.
body안에 내용들
제목 태그
h1, h2, h3, h4, h5, h6 제목을 나타내는 태그입니다.
list 태그
<ol>는 순서가 있는 목록(Ordered List)를 나타냅니다.<ul>는 순서가 없는 목록(Unordered List)를 나타냅니다.<li>는 목록의 내용을 나타냅니다.
form 태그
사용자의 입력을 받을 수 있는 내용들을 담는 태그입니다.
<form></form>으로 감싸주고 안에 입력을 받을 요소들을 넣어주면 됩니다.
<textarea>사용자에게 여러줄의 텍스트 입력을 받습니다.<input>사용자에게 입력을 받습니다. type(text, button, submit, reset, checkbox, radio, select, file...)
시맨틱 태그
header, nav, section, article, footer, aside
그 외 태그
<a> <p> <span> <ul> <ol> <li> <hr> <br> <div> <img>
CSS 살펴보기
margin, padding, border에 대한 이해
위 이미지를 보시면 margin, border, padding의 위치를 잘 표현하고 있습니다.
border는 내용(content)을 둘러싸고 있는 외곽선을 나타냅니다.
border를 기준으로 border와 content사이에 공백을 주는 것을 padding,
그리고 border 바깥에 공백을 주는 것을 margin이라고 합니다.
margin, padding 사용하기
margin과 padding을 사용하는 방법은 3가지가 있습니다.
-
모든 방향 동일하게 주기
margin: 10px;모든 방향에 10px의 margin을 부여합니다.
-
위 아래, 오른쪽 왼쪽으로 나누어서 주기
margin: 10px 20px;위 아래는 10px씩 오른쪽과 왼쪽은 20px씩 margin을 부여합니다.
-
방향마다 각각 주기
margin: 10px 20px 30px 40px시계방향으로 상 10px, 우 20px, 하 30px, 좌 40px margin을 부여합니다.margin-left: 10px직접 style을 선택하여 부여하는 방식으로 왼쪽에 10px margin을 부여합니다.
#wrap으로 감싸기
일반적인 사이트들은 브라우저에 주어진 너비를 모두 사용하지 않습니다.
위 사진처럼 양쪽에 여백을 주는 형식을 많이 사용하는데 이렇게 여백을 주기위해선
<body>의 내용전체를 감싸줍니다.
->index.html
<body>
<div id="wrap">
내용
</div>
</body>그리고 나서 너비를 주고 양옆에 auto의 마진값을 주면 됩니다.
->style.css
#wrap{
width: 1000px;
margin: 0 auto;
}float과 clear
대부분의 포털 사이트들이 가지고 있는 navigation bar를 만들기 위해, 또 어떤 컨텐츠 내가 원하는 부분에 배치하기 위해 필요한 태그 입니다.
float
말 그대로 띄워서 원하는 곳에 배치합니다.
간소화 한 navigation bar 코드로 살펴보겠습니다.
-> index.html
<nav>
<ul>
<li class="menu">메뉴1</li>
<li class="menu">메뉴2</li>
<li class="menu">메뉴3</li>
<li class="menu">메뉴4</li>
</ul>
</nav>-> style.css
.menu{
list-style: none;
float: left;
padding-right: 1rem;
background-color: tomato;
}
위 사진과 같이 <li> 태그들의 내용들이 모두 본문의 왼쪽으로 띄워졌습니다.
clear
float의 속성을 청소해(clear)주는 속성 입니다.
float을 사용하다보면 본문에 왼쪽 배치 오른쪽 배치를 하고 가운데 공간이 남는 경우가 있습니다.
그럴때 그 공간을 비워두고 다음 줄에 내용을 추가하고 싶은 경우에 사용합니다.
clear를 사용하지 않는 경우
clear: both;를 사용한 경우
