2일 차 복습, 속성 position 과 속성 값, 주석
오늘 내가 배운 것
주석 (언어마다 주석을 쓰는 방법이 다름)
코드가 실행되지 않는다. 메모처럼 해당 코드가 어디를 구현하는 건지 적어 둘 수 있다.
HTML : <!— —>
CSS : /* */
(html, css) 많은 부분에선 영역선택 후 cmd / ( 윈도우 : ctrl / )
css를 적용하는 3가지 방법
- 인라인스타일
- style
- 외부 파일
외부 파일을 사용할 때
link의 속성 3개 href, type, rel
type과 rel 은 외우는 부분 (type="text/css" rel="stylesheet")
작업을 할 때 css 외부파일 연결까지 확인 후 시작하자.
padding 을 margin보다 많이 쓰는 것이 효율적이다.
(margin을 쓰기 위해 써야 하는 코드가 길어지기도 하고, margin의 오류가 많다. 윗 블록과 아래 블록에 margin을 줬을 때 겹쳐서 처리되는 경우가 있었다... )
css에서 작성할 때 경로를 (어디서부터 가져오는지 ) 명시를 해주면 좋다. (선택자 '>' 를 이용)
Ex) #header > h1
id에 똑같은 이름을 쓰는 게 가능하지만 중복해서 쓰지 않는 게 암묵적인 약속 똑같은 이름을 쓸 때는 class를 사용하자.
블럭의 위치 조절 3가지 방법
- float
- 인라인
- position
**포지션을 쓰면 z-index를 다 써주는 것이 좋다.
position : 겹치게 표현할 수 있는 속성
top left right bottom z-index 으로 위치를 조절할 수 있다.
position: absolute; 절대적인
부모 엘리먼트가 포지션 속성이 없다면 브라우저 좌상단 기준으로 겹쳐진다.
부모가 relative 를 가지고 있으면 브라우저 기준이 아닌 부모의 포지션으로 간다.
position을 사용하는 블럭이 이동을 하면서 그 뒤에 있던 블럭이 앞으로 당겨진다.
position: relative; 상대적인
속해 있는 블럭 좌상단 기준으로 겹쳐진다.
2가지를 쓴다면 겹치지는 못하고 첫 번째 쓰인 포지션의 블럭의 밑으로 붙는다.
/* top left right bottom z-index*/ 속성을 이용해서 강제로 겹칠 순 있다.
absolute 를 쓰기 전에 기준 정도로만 생각하면 좋다.
큰 틀의 블럭은 이동하지 않고 적용 블럭이 겹쳐진다.
z-index : number;
숫자가 높을수록 앞으로 보인다.
숫자가 낮을수록 뒤로 들어간다.
position : fixed;
브라우저에서 블럭을 고정시킬 때 사용할 수 있다.
absolute 처럼 브라우저를 기준으로 적용한다.
Ex)
margin : 0 auto; == margin : 0 auto 0 auto ;
가운데 정렬
블럭을 눌러서 링크를 걸기 위해서 <a href ="#"> 처럼 href 속성을 사용해서 작성하면 된다.
링크에 #을 이용해서 코드 작성 후 실행하면 링크 효과만 있고 아무것도 실행되지 않음.
서체 스타일 속성 (폰트)
text-align : right, left, center .... ;
글자만 해당 위치로 바꿀 수 있는 속성
블럭을 유지한 채로 텍스트만 이동한 것이어서 밑에 있는 내용이 위에 빈 공간을 채워 줄 수 없다.
color : black, white, #000000 ...;
글자의 색을 변경한다. 색상 코드로 사용 가능
font-size : px,pt ....;
글자 크기 조절
text-decoration : none, underline ... ;
글자 꾸미기 ( 밑줄, 밑줄 없음, 도트, 웨이브 등등...)
font-weight : bold, normal, 100, 200, ....;
글씨 굵기 설정
position 연습하기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./public/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div class ="text" >Hello World!</div>
<div>web</div>
</div>
<div id="visual">
<div class="img">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</div>
<div id="contents">3</div>
<div id="footer">copyright ©</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
}
#header{
background: rgb(143, 4, 4);
height: 100px;
padding: 20px 0 20px 0;
box-sizing: border-box;
}
#header > .text {
/*text-align: right;*/
float: right;
background: darkblue;
color: yellow;
}
#wrap{
width: 100%;
height: 1000px;
background: blue;
}
#header2{
width: 1200px;
height: 100px;
margin : 0 auto;
background: red;
}
#visual{
background: darkgreen;
height: 500px;
margin: 30px 0 0 0;
}
#visual > .img{
position: relative;
top: 50px;
left:100px;
width: 900px;
height: 300px;
background: silver;
}
#visual > .img > .box1{
position: absolute;
top: 100px;
left:100px;
width: 100px;
height: 100px;
background: pink;
z-index: 1;
}
#visual > .img> .box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: purple;
z-index: 2;
}
#contents{
background: darkkhaki;
height: 500px;
}
#footer{
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background: black;
color: white;
z-index: 3;
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221015~221016 클론코딩 - 학원 홈페이지 만들기 (1) | 2022.10.17 |
|---|---|
| 221014 HTML,CSS 클론코딩 (0) | 2022.10.14 |
| 221012 CSS (0) | 2022.10.12 |
| 221011 HTML (1) | 2022.10.11 |
| [유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 9강 (1) (0) | 2022.10.10 |
댓글