HTML의 두 가지 성격
block: y축 정렬 형태로 출력되며 공간을 만들 수 있고, 상하배치 작업이 가능하다. margin, bottom, height, width와 같은 값을 가질 수 있다.
<p>block</p>
<p>block</p>
<p>block</p>다음과 같이 입력했을 때
block
block
block
의 형태로 출력된다.
inline: x축 형태로 출력되며 공간을 만들 수 없고, 상하배치 작업이 불가능하다.
<a>inline</a>
<a>inline</a>
<a>inline</a>다음과 같이 입력했을 때
inline inline inline 의 형태로 출력된다.
CSS의 구성요소
선택자 { 속성: 속성값; }
대표적인 속성
font-size: 폰트 사이즈
font-famliy: 글꼴
color: 폰트 색깔
background-color: 배경 색
text-align: 텍스트 정렬
font-weight: 글자 두께
border-style: 점선-> dotted 실선->solid
width: 선택한 요소의 넓이를 결정한다. (고정값:px, 가변값:%)
height: 선택한 요소의 높이를 결정한다.
background-image: url(이미지 경로)
background-repeat: 배경 반복 여부 (no-repeat 반복을 안한다.)
background-position: 공간 안에서 이미지 좌표를 변경할 때 사용한다.(left, right, top, bottom, center)
HTML에 CSS를 적용시키는 세 가지 방법
1. inline style sheet
<h1 style="color:red;"> inline </h1>태그 안에 직접 원하는 스타일을 적용하는 방법이다.
가장 직관적인 방법이지만 가독성이 떨어진다.
2. internal style sheet
<head>
<style>
h1{color:red;}
</style>
</head>head태그의 style에 넣는 방법이다.
inline보다는 깔끔하게 CSS를 관리할 수 있다.
3. external style sheet
<head>
<link rel="stylesheet" href="index.css">
</head>link태그로 불러오는 방법이다.
html파일과 css파일을 완전히 분리한다.
가장 깔끔하고 유지보수가 쉬운 css적용 방법이다.
CSS 선택자 유형
1. type 선택자: h2, div와 같은 특정 태그에 스타일을 적용하는 방법이다.
h1{color:red;}2. class 선택자: 클래스 이름으로 특정위치에 스타일을 적용하는 방법이다.
<style>
.box{width:100%;}
<style>class명 앞에 .을 찍으면 된다.
3. id 선택자: id 이름으로 특정위치에 스타일을 적용하는 방법이다.
<style>
#box{width:100%;}
</style>id명 앞에 #을 적으면 된다.
부모와 자식 관계
<body>
<h1>body h1</h1>
<p>body p</p>
<body>body와 h1, p는 부모 자식관계다.
h1과 p는 형제관계다.
원하는 특정 부분에 css를 적용하고 싶다면
body h1{color:red;}
body p{color:blue;}다음과 같이 부모를 구체적으로 기입하여 적용할 수 있다.
css를 적용하기 위한 우선순위를 결정하는 세가지 요소
1. 순서
h1{color:red;}
h1{color:blue;}다음과 같이 h1의 color요소가 두번이상 중복됐을 때는 가장 늦게 기입된 속성값으로 적용된다.
따라서 h1은 blue의 속성값을 갖게 된다.
위에서 아래로 스캔한다고 생각하면 된다.
2. 디테일
body div{width:100%;}
div{width:50%;}다음과 같이 css가 입력된 경우 더 구체적으로 작성된 선택자의 우선순위가 높다.
따라서 body의 div태그는 100%의 width를 갖게 되고 나머지 div태그는 50%의 속성값을 갖는다.
3. 선택자에 의한 캐스케이딩
<h1 id="color" class="color" style="color:red;"> red </h1>
.color{color:yellow;}
#color{color:blue;}
h1{color:pink;}다음과 같이 style, class, id, type이 중복되어 css속성을 지정할 때는
style>id>class>type의 순서대로 css가 적용된다.
따라서 red의 속성값을 갖게 된다.
박스 모델
박스 모델의 구조
box는 다음과 같이 margin->border->padding->content로 구성됐다.
margin은 border 바깥의 여백을 뜻하고 padding은 border와 content사이의 여백을 뜻한다.
div{
margin: 5px 0 0 5px;
}margin은 margin-left, margin-top과 같이 margin의 방향을 특정하여 사용할 수 있지만
다음과 같이 한줄로 표현할 수 있다. 시계방향으로 top-right-bottom-left의 순서를 갖는다.
마진 병합현상
.box1{margin-bottom:150px;}
.box2{margin-top:100px;}
<div class="box1">box1</div>
<div class="box2">box2</div>단순하게 생각했을 때는 box1은 밑으로 150px만큼 마진을 갖고 box2는 100px만큼 위로 마진을 갖기 때문에
두 box사이에 총 250px의 마진을 갖는다고 생각할 수 있다.
그러나 이렇게 마진이 겹칠 때는 두 값중 마진이 큰 값으로 적용된다.
따라서 두 box사이는 총 150px의 마진을 갖는다.
position의 속성(absolute)을 이용하여 250px의 마진을 갖게 할 수 있는 방법은 있다.
하지만 마진병합이 발생됐을 때 일반적으로 큰 마진값이 적용된다.
레이아웃에 영향을 미치는 속성
display
: display는 inline, block, inline-block의 속성을 갖는다.
float
: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝으로 정렬시키고자 할 때 사용된다.
.left{float:left;}
.right{float:right;}
<div class="left">div1</div>
<div class="left">div2</div>다음과 같은 경우에는 div1과 div2가 왼쪽으로 차례대로 정렬된다.
clear
: float 속성을 제어하고 싶을 때 사용된다.
<div class="left">div1</div>
<div class="left">div2</div>
<footer>footer</footer>
footer{clear:both;}clear 속성을 both로 지정했을 때 직전요소가 float 속성을 가지더라도 그 다음 block에 요소가 배치될 수 있도록 한다.
브라우저 사이에 공간 제거하기
*{
margin:0px;
padding:0px;
}html는 기본적으로 margin값과 padding값을 갖고있는 요소들이 많기 때문에 개발을 시작할 때 0으로 초기화 하는 것이 중요하다.
'앨리스 AI' 카테고리의 다른 글
| 엘리스 AI 4주차 flask 기초 (0) | 2021.07.12 |
|---|---|
| 앨리스 AI 트랙 1주차 리눅스 기초 (0) | 2021.06.23 |
| 앨리스 AI 트랙 1주차 GIT (0) | 2021.06.22 |
댓글