728x90
1. CSS란?
- CSS 는 Cascade Style Sheet 의 약자로 html 에 디자인적 요소를 추가하기 위한 언어(기능)
- 지금까지 보았던 어떤 언어들과도 살짝 다르기 때문에 기억해야할 것들이 많다ㅠ
- 태그 전체에 적용할 때는 태그명 { ~~ } 을 사용하고 보다
- 구체적으로 css 를 적용할때는 태그명#id값 { ~~~ } 을 사용한다.
- 자주 사용되는 CSS 속성
| 속성 | 설명 |
| margin | - 여백을 주는 속성. margin-top: 20px 라고 한다면 위쪽에 20px 만큼 여백을 생성함. 또한 margin 은 12시 방향에서 시계방향으로 정의하는 것을 원칙으로 한다. - margin auto 를 사용하면 사용자 창의 크기에 맞게 중앙에 위치한다 |
| color, background-color | 글자색과 배경색 |
| border | 대체적으로 표의 테두리 표시. 이때 solid 는 실선, dotted 는 점선 |
| width, height | 너비와 높이 |
| position | absolute, relative, fixed(고정), skicky(화면에 맞춰 이동) |
2. CSS 기본
- css 의 기본은 태그를 활용하는 것이다. css 에서는 선택자라고 하며, 이 선택자는 정말 매우 매우 중요하다
- 선택자는 태그명을 기본으로 하고, sytle 태그 밑에 내가 디자인을 적용할 태그 { ~~ } 를 적어서 디자인을 적용한다
- { ~~~ } 안에 들어가는 내용은 진짜 엄청 다양하기 때문에 차라리 그때그때 검색하자 → 물론 자주 사용하는게 있고, 자주 사용하다보면 익숙해지겠지
/* CSS Cascade Style Sheet */
/* 페이지에 적용 스타일을 명시 */
/* 선택자 { 속성 : 값 } */
/* , 로 묶으면 2개를 한번에 묶을 수 있음 */
table, td {
/* border: 1px solid red; */
border-top:1px solid red;
border-bottom: 1px solid deepskyblue;
}
table {
/* border : 1px solid blue; */
width: 500px;
text-align: center;
}
tr {
/* border : 1px solid blue; */
}
3. Class
- class 는 태그를 묶음 단위로 처리하기 위해서 존재
- id 는 고유값을 기본으로 하기 때문에 동시에 처리하기 위해서는 class 를 사용해 묶음 단위로 처리하는것이 좋다.
- class 는 [.클래스명 ]을 사용하여 CSS 를 적용한다.
<html>
<head>
<title>CSS 선택자</title>
<style>
p#aaa, p#bbb {
color: red;
}
p#ccc, p#ddd {
color: blueviolet;
}
/* class 를 활용한 CSS 적용 */
/* 태그명.클래스명 또는 */
/* .클래스명 */
li.a{
color: aqua;
}
.b{
color: violet;
}
li{
list-style: none;
}
</style>
</head>
<body>
<!-- id 값을 활용해서 css 로 적용가능 -->
<h1>ID 값 활용</h1>
<p id="aaa">id 속성은 태그 안에서 존재하며, html 페이지내 고유값!</p>
<p id="bbb">id 속성은 태그 안에서 존재하며, html 페이지내 고유값!</p>
<p id="ccc">id 속성은 태그 안에서 존재하며, html 페이지내 고유값!</p>
<p id="ddd">id 속성은 태그 안에서 존재하며, html 페이지내 고유값!</p>
<ul>
<!-- 클래스에 CSS 적용을 위해서는 .클래스명 사용 -->
<li class="a">상품1</li>
<li class="a">상품2</li>
<li class="b">상품3</li>
<li class="b">상품4</li>
</ul>
</body>
4. CSS 의 상속
- 부모 요소에 적용한 스타일이 자식 요소에 연결되어 적용되는 것을 CSS에서의 상속이라고 한다
- CSS에서 속성은 기본적으로 하위요소에 상속되는 속성과 상속되지 않는 속성이 있다.
- border, margin, padding, float, postition 속성들은 상속되지 않는다.
- 상속은 부모 > 자식 { ~~~~ } 으로 사용한다.
<html>
<head>
<title></title>
<style>
body{
font-size: 100%;
}
/* 부모 > 자식 */
div{
/* border 은 자식에게 상속되지 않으나 */
border: 1px solid red;
/* background color 은 상속되어 자식도 적용된다 */
background-color: bisque;
}
/* 상속은 부모 > 자식 으로 사용한다 */
div >p {
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- 상속 -->
<div>
<p>부모 요소에 적용한 스타일이 자식 요소에 연결되어 적용되는 것을 CSS에서의 상속이라고 한다</p>
</div>
<p>
CSS에서 속성은 기본적으로 하위요소에 상속되는 속성과 상속되지 않는 속성이 있다.
</p>
<p>
border, margin, padding, float, postition 속성들은 상속되지 않는다.
</p>
</body>
</html>
5. CSS : inline, block
- inline 요소들은 딱 해당 요소의 크기만큼을 html에서 크기로 잡는다. 따라서 뒤에 다른 요소가 오면 바로 옆에 붙는다
- block 요소들은 inline 과 다르게 해당 요소의 한줄 만큼(br) 을 html 에서 크기로 잡는다. 따라서 다른 요소가 오면 한줄 밑에서 붙는다.
<html>
<head>
<style>
img{
width: 300px;
height: 300px;
}
div#div1{
width: 300px;
height: 300px;
background-color: greenyellow;
}
div#div2{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<img src="../images/harryPoter.jpg" alt="">
<img src="../images/movie_image_4.jpg" alt="">
<span>인라인요소 : 정확히 인라인 요소가 들어갈 만큼만 크기를 차지</span>
<div>block 요소 : br 없이도 한줄 전체를 크기로 갖음</div>
<div id="div1"></div>
<div id="div2"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
6. CSS : position
- css position 은 각 요소들의 위치를 담당하며 대표적으로 아래와 같은 속성을 사용한다
- relative : 상대적인 위치를 설정할 때 사용한다. 상대적이란 해당 요소가 원래 있어야하는 위치에서 특정한 속성만큼 위치한다는 의미이다.
- fixed : 단어 그대로 고정하는 속성. 고정의 의미란 사용자의 화면에서 고정한다 라는 의미이며, 고정이기 때문에 화면을 스크롤 하더라도 해당 위치에 ‘고정’된다.
<html>
<head>
<style>
img{
width: 300px;
height: 300px;
}
div#div1{
position: relative;
width: 300px;
height: 300px;
background-color: greenyellow;
top: -100px;
left: 650px;
}
div#div2{
width: 300px;
height: 300px;
position: relative;
/* -값을 사용하게 되면 말 그대로 - 만큼 이동하게 된다 */
top: -250px;
background-color: aqua;
}
#harry{
position: fixed;
bottom: 30px;
right: 0px;
}
</style>
</head>
<body>
<img id="harry" src="../images/harryPoter.jpg" alt="">
<img src="../images/movie_image_4.jpg" alt="">
<span>인라인요소 : 정확히 인라인 요소가 들어갈 만큼만 크기를 차지</span>
<div>block 요소 : br 없이도 한줄 전체를 크기로 갖음</div>
<div id="div1"></div>
<div id="div2"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
참고
- position 속성
CSS의 position 속성으로 요소 배치하기
Engineering Blog by Dale Seo
www.daleseo.com
댓글