css 기초 정리 (1) - css 기본 세팅, 박스모델, margin, padding

css 기초 정리 (1) - css 기본 세팅, 박스모델, margin, padding

Summary:

생활코딩 웹 기본수업 중 css에 대해 기억해야 할 내용입니다.


기본 세팅

css는 항상 html과 함께 간다. css는 html을 예쁘게 하기 위해 존재한다. html은 정보 에 집중! css는 시각적 측면에 집중!

<head><style> 태그 안에 css가 들어간다. 따라서 이 안은 css문법에 따라 작성한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

/*css코드*/
h1 {color:red}

</style>
<title></title>
</head>
<body>

</body>
</html>

h1 {color:red}


h1, h2, h3, h4에 각각의 속성을 넣어봤다.

<style>
h1 {color: #427fed}
h2 {
text-decoration: underline;
font-size: 10px
}
h3, h4 {
color: #fff;
background-color: #db4437
}
h4 {
text-decoration: underline
}
</style>

pic1

적용 결과



태그가 여러겹일 때

<body>를 보면 h1이 하나는 <header> 안에, 하나는 <header> 밖에 있다. 이 둘을 구분시키는 속성을 적용시켜보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {color: #333}
header h1 {
border: 1px solid #db4437;
color: #db4437
}
</style>
<title></title>
</head>
<body>
<header>
<h1>헤더 안 h1입니다.</h1>
</header>
<h1>헤더 밖 h1입니다.</h1>
</body>
</html>

pic2

적용 결과



css 박스모델

1. 각 리스트에 빨간색 점선 박스를 씌우고 싶다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li {
border: 1px dotted #db4437;
margin-bottom: 20px
}
</style>
<title></title>
</head>
<body>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>

</body>
</html>

pic3

2. list2에만 검정색 실선 박스을 채우고 싶다.

list2의 <li>id="selected"를 추가하고, 위

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li {
border: 1px dotted #db4437;
margin-bottom: 20px
}
#selected {
border: 1px solid #000;
margin: 40px
}
</style>
<title></title>
</head>
<body>
<ul>
<li>list1</li>
<li id="selected">list2</li>
<li>list3</li>
</ul>

</body>
</html>

pic4


3. 글자와 블럭 사이 간격이 좁은 것 같다. 늘리자.

padding 속성을 이용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li {
border: 2px dotted #db4437;
margin-bottom: 20px;
padding: 30px
}
</style>
<title></title>
</head>
<body>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>

</body>
</html>

pic5



float

css로 이미지 편집하기

단순히 <body>에 그림과 글을 쓰면 아래 결과와 같이 그림이 너무 작거나 클 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://imyeonn.github.io/assets/images/post/001/09_04.png" />
merchandising 즉, 상품화(상품기획)이 중요하다고 한다. 브랜드들을 많이 입점시키는 것이 경쟁력이 아니라 상품을 어떻게 고객에게 매력적으로 표현할 수 있는지가 핵심이다. 문제는 그 상품기획과 더불어 고객에게 특별한 경험을 제공함과 동시에 수익까지 내야 한다는 것이다.
</body>
</html>

pic6

그림이 너무 커서 오른쪽이 짤렸다.


float를 이용하면 이미지를 왼쪽 혹은 오른쪽으로 옮기고 그 빈공간에 글자를 채울 수 있다. 샘플 이미지가 너무 커서 width 속성으로 크기를 줄였다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
width: 200px;
float: left; /*또는 float: right;*/
}
</style>
<title></title>
</head>
<body>
<img src="https://imyeonn.github.io/assets/images/post/001/09_04.png" />
merchandising 즉, 상품화(상품기획)이 중요하다고 한다. 브랜드들을 많이 입점시키는 것이 경쟁력이 아니라 상품을 어떻게 고객에게 매력적으로 표현할 수 있는지가 핵심이다. 문제는 그 상품기획과 더불어 고객에게 특별한 경험을 제공함과 동시에 수익까지 내야 한다는 것이다.
</body>
</html>

pic7

pic8


이어지는 내용은 css 기초정리 (2)에서 정리한다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora