1) display: flex;를 쓰지않고, 가운데 배치시키는 방법
margin: 0 auto;
- 가운데 배치키시고 싶은 자식 div에다가 css설정하면 된다.
- flex와 다른 점은 부모에다가 설정하고 싶은 것이 아닌 자식에다가 직접 설정하는 것이다
2) 웹사이트 클론할때, html작성 방식
이거 쓰지말고, sementic tag써라
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>- 윗 부분은 #header, 중간 부분은 #body, 밑 부분은 #footer에 작업한다.
3) 비율 유지하면서 img크기 줄이는 법
- command+option+i를 이용해서 img의 폭과 높이 px을 알아낸다.
- 폭,높이를 2로 나눈다.
- 결과값으로 css에서 img의 높이와 폭을 재설정한다.
- 숫자는 줄어들어도 비율은 유지된다.
4) body tag의 필요없는 기본설정 없애기
- 구글에 reset css검색한다.
- css 파일을 만들어 복붙한다.
- main css파일에 @import 시킨다.
3-1. 이 과정은 reset.css파일과 main css파일을 연결하는 것이다.
3-2. main.css 파일의 맨 위에@import "파일명.css";복붙 - 변수css와 같이 다른 css의 @import보다 위에 있어야함
5) img를 맨 밑에 두는 방법
overflow: hidden;
6) img를 div크기에 맞추는 방법
- 폭이나 길이에 100%를 설정하면 된다.
width: 100%;
7) 웹사이트 타이틀옆의 작은 이미지 넣을때, 쓰는 tag
<link rel="shortcut icon" sizes="16x16" href="icons/avatar.png" />
- size="" 16x16 고정
8) list만들때, 쓰는 tag
숫자 list <ol> <li>프론트엔드</li> <li>백엔드</li> </ol>
- 프론트엔드
- 백엔드
숫자없는 list <ul> <li>프론트엔드</li> <li>백엔드</li> </ul>
- 프론트엔드
- 백엔드
9) 링크만들때, 쓰는 tag
<a href="https://velog.io/@devyoon99/TIL%EB%AA%A9%EC%B0%A8-%EC%A0%95%EB%A6%AC" target="_blank"> devyoon99 devblog </a>
- target="_blank" 의 기능은 클릭하면, 새로운 창이 뜨고, 링크로 이동한다.
- a tag에다가 css로
text-decoration="none"을 설정하면, 링크 컨텐츠에 밑줄이 사라진다.
10) semantic tag
- 정의 : 사용자가 알아보기 쉽게 쓰는 tag를 의미한다, 아무기능 없음
<header></header>
상단부분을 의미한다.
<footer></footer>
하단부분을 의미한다.
<main></main>
상단, 하단이 아닌 부분들을 감싸는 tag
<aside></aside>
main중에서 옆으로 쳐진 부분
<section></section>
article tag가 여러가지가 있을때, 비슷한 것끼리 section tag로 묶는다.
<article></article>
본문내용을 의미한다.
<nav></nav>
어떤 정보가 나열되어있는지 정리되어있는 navgtion-bar를 묶는다.
11) css position:
position: fixed;
스크롤을 내려도 화면상에서 고정시킬 수 있다.
position: relative:position: relative; top: -10px; right: -10px;relative를 설정하면, 초반 위치를 기준으로 움직일 수 있다.
중요한 점은 항상 px앞에 -(마이너스)를 붙여야 한다.
top: -10px; 위로 10px만큼 움직인다는 것을 의미한다
position: absolute;
자식 div를 부모 div기준으로부터 움직이고 싶을때, 사용한다.
- 사용방법
- 자식 div에다가
position: absolute;설정한다.- 부모 div에다가
position: relative;설정한다.- 자식 div에다가 top, bottom, right, left 설정한다.
- 예시 부모 div기준으로 밑으로 부터 5px, 오른쪽으로 부터 0px에 자식 div를 위치시키고 싶다
- bottom: 5px;
- right: 0px;
두개의 div가 아래와 같은 부모자식 div가 아니라면 absolute는 설정되지 않는다. <div> <div></div> </div> 👇 안되는 예시 <div></div> <div></div>
12) display: flex; 해제시키는 방법
- 부모div와 자식div사이에 새로운 div를 만든다.
<div class="부모"> <div> <div class="자식" ></div> </div> </div>
- 이때, 새로운 div에 css로 크기,폭,배경색을 설정해야한다.
13) space-between없이 div들을 일정한 간격띄워서 배치시키는 방법
- 가정 부모div 1개, 자식 div4개이다.
- 부모 div에
display: flex;설정한다.- 부모 div에
justify-content: center;설정한다- 자식 div들에다가
width: 25%;설정한다.
- 목적은 모든 자식 div들이 같은 width를 가지는 것이 목표이다. 전체 100%인데 자식div가 4개이므로 100을 4로 나눈 값인 25%를 부여하는 것이다.
- 자식 div에
display: flex;설정하고,justify-content: center;설정하면, 자식 div안에 있는 것들이 자식 div의 가운데에 배치된다.<html> <head> <style> .king { display: flex; justify-content: center; } .small { width: 25%; display: flex; justify-content: center; } </style> </head> <body> <div class="king"> <div class="small">치킨</div> <div class="small">피자</div> <div class="small">초밥</div> <div class="small">김밥</div> </div> </body> </html>
14) text를 가운데 배치하는 방법
text-align: center;
15) 투명도 조절
opacity: 0.7;
투명도 70% 이다.
dev