#round {border-radius: 25px;}
</style>
...
<img src="img/cat.png">
<img id="round" src="img/cat.png">
cf. 이미지를 원형으로 표시하기
#round {border-radius: 50%;}
cf. 원하는 모서리만 둥글게 처리
#round {
border-top-left-radius: 20px;
}
2. 여백을 조절하는 속성
요소 주변 여백을 설정하는 margin 속성
margin: <크기> | <백분율> | auto
ex)
#margin1 {margin: 50px;} /*상하좌우 모두 50px*/
#margin2 {margin: 30px 50px;} /*상하 30px, 좌우 50px*/
#margin3 {margin: 30px 20px 50px} /*상 30px 좌우 20px 하 50px*/
margin속성을 사용해 가운데 정렬
body {...}
#container {
...
width: 60px;
margin: 20px auto;
padding: 20px;
}
<div id="container">
...
margin 중첩 이해하기
요소를 세로로 여러개 배치할 때, 중간에 있는 마진이 지나치게 커지는 것을 방지
이로 인해 서로 만날 때, 큰 마진값으로 합쳐진다.
contents와 테두리사이 여백을 설정하는 padding 속성
#padding1 {padding: 20px 30px 40px 50px;}
...
</style>
...
🤔Style 형식
- 맨 앞의 선택자: 스타일을어떤 태그에 적용할 것인지알려주는 것. - { }안에 스타일 정보를 넣는다. (이때,;으로 구분, 여러 스타일 규칙을 지정가능)
Ex. 글자를 가운데로 정렬 및 파란색 글자로 지정하고 싶을 때,
🤔Style Sheet 스타일 규칙을 한눈에 확인 및 필요 시 수정하기 쉽게한군데 묶어 놓은것. 크게 스타일 시트는2가지로 나눌 수 있다. - 브라우저 기본 스타일: 웹브라우저에 기본으로 만들어져 있음 - 사용자 스타일: 사이트 제작자가 만듬 i) 인라인 스타일 ii) 내부 스타일 시트 iii) 외부 스타일 시트
Ex) 인라인 스타일
3. 웹 문서의 레이아웃 만들기
배치 방법을 결정하는 display 속성 (block, inline, inline-block, none)
배치 방법을 지정하는position 속성 (static, relative, absolute, fixed)
static: 문서의 흐름에 맞춰배치(기본값) / relative: 위치값 지정가능한 static. /. absolute: relative값을 사용한 상위요소를 기준으로 위치를 지정해 배치 / fixed: 브라우저창 기준 위치를 지정해 배치
🤔 Style Sheet 스타일 규칙을 한눈에 확인 및 필요 시 수정하기 쉽게 한군데 묶어 놓은것. 크게 스타일 시트는 2가지로 나눌 수 있다. - 브라우저 기본 스타일: 웹브라우저에 기본으로 만들어져 있음 - 사용자 스타일: 사이트 제작자가 만듬 i) 인라인 스타일 ii) 내부 스타일 시트 iii) 외부 스타일 시트
Ex) 인라인 스타일
<h1>레드향<h1>
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
Ex) 내부 스타일 시트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
h1{
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
- 웹문서의 첫 부분은 문서유형(document type)을 지정한다. - 위와 같이 선언하여 현재 문서가 HTML5문서임을 명시
웹 문서의 시작을 알리는 <html>태그
- <!DOCTYPE html> 선언 후 HTML파일의 시작과 끝을 표시 - <html>과 </html>사이 웹문서 소스를 작성
cf. <html lang="ko">의 의미?
- lang 속성은 문서에서 사용할 언어를 지정할 수 있다.
- 이는 '한국어로 된 문서'로 범위를 제한시, <html lang="ko">를 우선검색하게 해준다.
웹 브라우저에 문서 정보를 알려주는 <head>태그
- 웹 브라우저가 알아야 할 정보를 입력 - 문서에서 사용할 스타일 sheet file도 이곳에 연결해준다.
📌 <meta> - data에 관한 데이터를 의미, 웹문서와 관련된 정보를 지정할 때 사용 - 가장 중요한 역할: 화면에 표시될 글자에 대해 어떤 인코딩 사용할 지 지정 ex) 웹서버는 영어가 default라 한국어 사용 시, UTF-8을 적어줘야한다.
<meta charset="UTF-8">
또한, 추가적으로 <meta>태그를 이용해 추가적인 정보를 지정할 수 있다.
<meta name="" content="">
ex)
// 웹 문서의 키워드 지정
<meta name="keywords" content="html의 구조">
// 웹 문서의 설명 지정
<meta name="description" content="html의 구조를 알아보자.">
// 웹 문서의 소유자나 제작자 지정
<meta name="author" content="Hyeongchan Im">
📌 <title> - 웹 문서의 제목을 나타내는 태그
웹 브라우저에 내용을 표시하는<body>태그
- 앞선 내용들(!DOCTYPE, html, head)은 문서유형 및 정보를 정의하고 입력한 것. - <body>태그는 실제 웹 브라우저에 표시할 내용을 입력한다. - 앞으로 후술할 HTML태그는 대부분 <body> 안에서 사용된다.
