<!--css를 따로 링크로 만들기>
1.새 폴더 만들기- 폴더 이름 지정 common
2. common폴더 안에 또 css폴더 만들기
이름에- common/css라고 나옴
3. 새 파일 만들기 index.css
4. html로 돌아가서 head에 링크 만들기
<link rel="stylesheet" href="./common/css/index.css">
<!-- 이때 띄어쓰기 주의할 것. "stylesheet"을 "style sheet"이라고 쓰기만 해도 링크가 연결 안됨. 주의주의>
<!-- ./ 의 의미 = 경로설정 >
.은 자기 자신을 의미함 ./common/css/index.css 는 지금 위치에서 common으로 가서 css로 가서 index.css로 가라
..(점 두개)는 현재 위치에서 밖으로 나가라는 의미
참고) 이미 넣을 때(경로 설정 할 때) 해당 이미지가 그 html 파일 근처에 있어야 함. 예를 들어 해당 html 파일이 폴더
<구문영>안에 있으면 그 이미지도 해당 폴더 안에 있어야 함.
ex) 위 사진의 경로는
<a href="#"><img src="./image/logo.png"></a>
-------------------------------------------------------------
<display:inline-block> 태그는 인라인은 원래 넓이 지정이 안되는데 넓이를 지정하고싶을 때 사용.
--------------------------------------------------------------
{margin}
위아래, 양옆 여백공간 지정하고 싶을때 사용.
1) 상,우,하,좌 여백을 모두 다르게 하고싶을 때는 4개를 모두 쓴다.
{margin 20px 0 0 0} <!-- 시계방향 순서라고 생각하면 편함.>
2) 위아래, 양옆 여백을 각각 같게 정할때는 두개만 쓰면 된다.
{margin 40px 0} <!-- 먼저 오는 숫자가 위,아래 지정값/ 두번째 숫자가 좌우 지정값임>
예를 들어
{margin 0 auto} 라고 한다면 이는 위아래 여백은 없고 좌우는 자동이므로
=> 가운데 정렬이라는 의미로 해석 할 수 있다.
--------------------------------------------------------------
a{text-decoration: none;}
<!-- 리스트의 밑줄 없앨때>
ul,li{list-style: none;}
<!-- 이건 뭔지 모르겠음>
---------------------------------------------------------------
html과 css를 처음부터 안보고 작성할 수 있을때까지 반복해봐야 함. 머릿속에 전체 이미지 레이아웃을 그리고
그 다음 점점 세부적으로 들어가는방식.
몇개의 div가 들어가는지 각각이 어디에 속해있는지 생각하며 작성할 것.