오늘은 외부 css를 활용하여 구조실습을 하였다.
css에 내부 css와 외부 css가 있는데
말 그대로 내부 css는 html 페이지에 <head> 태그 style 안에 관련 css를 코드 하는 것이고,
외부 css는 css라는 폴더를 따로 두고 그 폴더 안에다가 해당 html에서 사용할 css코드를 따로 짜서 사용하는 것이다.
보통 외부 css를 많이 쓴다고 들었다.
왜냐하면 외부 css로 구현해 놓으면 여러 html페이지에 대입하여 사용할 수 있으니 유지성과 보수성이 여러모로 내부 css 보다 더 낫다고 하셨다.
@외부 css구현방법
1. 내가 (공통으로 사용할 css : common.css , 페이지 구현할 css (=index페이지. css) : 구조실습. css ) 이렇게 css폴더에 css파일을 만들어놓으면
2.html 페이지 <head> 안에 link태그를 선언해 <link rel="stylesheet" href="./css/구조실습. css"> 이렇게 html페이지로 불러와서 사용할 것이다.
※구조실습
1. 탑배너 부분
우선 오늘은 처음으로 제일 위에 탑배너와 머리 부분을 해보았는데 어렵게 느껴졌다. 그래서 오늘은 좀 어렵다고 느낀 부분에 대하여 다시 점검해 볼 것이다.(아예 안 배웠던 방식이라 더 그랬던 것 같다.)
- 우선 전체적으로 id:wrap 에다가 감싸주고 부모 div 태그 안에 자식 img 태그 3개와 1개의 자식 div 태그를 선언해 준다.
- 부모태그에 전제척으로 가로*세로 (100% * 40px)로 선언해 주고 배경색을 이미지태그의 색과 같이 (f12에서 backgroun-color에서 돋보기로 색확인가능하다) 설정해 준다. 그리고 img태그 3개에다가 각각 탑배너 이미지를 적용시키고 img태그를 가운데 정렬 시키기 위해서 부모태그에서 text-aline:center을 선언해 준다. 그러면 img태그 3개가 중아에 위치할 것이다.
그런데 img는 inline 요소기 때문에 같이 나란히 있으면 중간 부분에 띄워져 있을 것이다 -이걸 없애기 위에 부모태그에 font-size:0;을 주므로 띄어쓰기를 붙여 이미지를 이어 보이게 해 준다.
-자세히 보면 이미지의 제일 왼쪽과 오른쪽의 색이 다르다 왼쪽색깔은 기존 부모태그의 배경색으로 입힌다 해도 맨 오른쪽 색은 부모태그와 색이 이질감이 있을 것이다. 이것을 맞추기 위해 4번째 자식 div 태그에다가 가로*세로 ( 50%*100%)와 배경색을 오른쪽배너의 색과 같은 색을 고르고 position을 활용해 부모 태그에 맨 오른쪽에다가 덮어줄 것입니다.
-근데 position을 활용해서 붙여서 가운데 img태그보다 위에 있어서 덮어 보일 것인데 이것을 img태그에다가 z-index :9;이렇게 활용해 뒤에 있는 img 태그를 앞으로 보이게 해 줄 것이다.
-그리고 마지막으로 탑 배너에 X 버튼을 누르면 배너가 사라지게끔 해주려고 하는데 이건 크게 탑 배너 부모, 자식 박스들을 input 타입 radio로 묶고 label 태그도 이용해 id와 for 값을 rd로 이어지게끔 해줄 것이다.
-laber 태그 css 에다가 가로 *세로(40px*40px) , 배경색 blue 글자색 X를 white , font-size를 선언해서 박스를 만들고 position을 활용해 text-indent로 radio를 밖으로 내어 쓰고, 기준점을 부모태그로 하여 오른쪽에 위치하게 할 것이다.
-#rd :checked + 부모클래스 {(체크하면 부모클래스가 실행된다. display:none; 사라지게 할 것이다.}
2. 헤더 부분
@header 부분은 위, 아래로 나눠서 볼 것이다. 로그인 /회원가입, 알림 사이에' │' 이런 표시가 있다.
-이것은 보통 div태그를 한 개 더 만들어 거기다가 가로*세로값을 주고 배경색을 채워서 모양을 만들어준 것이다.
-header 부분에 전체적으로 가로*세로 ( 100% * 90px), 배경색 #fff (흰색:투명색)을 적용해 줄 것이고
-w_1140 공톨 css를 적용한 div태그를 만들어 가로 1140px margin:auto 값을 가지고 있는 태그를 만들어주고
-10x10이라는 로고 부분은 가로*세로(이미지 싸이즈로 맞게 선언하고) url로 이미지를 적용시켜서 position을 활용해 left , top으로 위치하게 하고 오른쪽 부분에 로그인/회원가입 부분을 ul , li로 만들고 float:left 하고 (ul) 폴더로 묶어서 마찬가지로 position으로 w_1140 클래스 right, top에 위치하게 할 것이다.
-header 아랫부분클래스도 다이어리 스토리 신상품. 등 ul에 li로 묶고 li는 위에화 똑같이 가로*세로, li들 float :left로 선언해 주고 정렬해 주고 positon을 이용해 기준점 대비 bottom, right로 위치 정해줄 것이고 사이간격은 margin으로 늘려줄 것이다.
-검색창은 부모 div 태그를 만들고 그 안에 input 타입과 그 안에 div 아이콘태그를 만들어줄 것이고 부모 div태그를 크기를 설정하고
마찬가지로 position으로 위치 정해주고 overflow :hidden을 선언해 줌으로써 나중에 밖으로 삐져나오는 imput요소나 url 요소나 숨겨줄 것이다.
-우선 input 태그를 가로*세로 (100% 로주고) box-sizing을 선언해 부모태그에 테두리에 맞춰줄 것이고 icon태그에 도 가로*세로 설정 후 position으로 기준점인 div부모태에 오른쪽으로 위치시켜 줄 것이다. 그리고 background :cover 쪽에 가로*세로 값을 정해서 해당 이미지를 찾아줄 것이다 (이렇게 찾는 이유는 해당 이미지가 여러 가지 있는 이미지파일에서 골라야 하는 '스프라이트이미지'라서 그렇다.)
그리고 부모 태그에서 boder과 boxsizing, border-radius를 설정으로 완료된다.
3.nav 부분
- 여기도 ul li부분으로 설정해 주고 ul 부분에 가로*세로(100% * 40px), text-aline:center ( 자식 li텍스트들을 가운데위치)
배경색을 설정하고 li부분을 display: inline-block으로 선언해(float:left와 같은 효과) 주고 가운데 유치시키고 안에 '│' 부분이 있는데 위에서 한 거와는 다르게 여러 개 선언해 주고 backgroun:transparent (해당태그 투명해지는 효과) 속성으로 이미지에 없는 부위에 '│'이 부분은 숨겨놓을 것이다. (왜 이렇게 여러 개 해주냐면 나중에 실제로 일할 때 작대기를 위치나 개수를 변경할 때 가 있을 때 쉽게 변경하고 숨겨놓게 하기 위해 설정한다고 말씀하셨다.)
4.container (main banner)
- main banner에서 이미지가 2개일 경우 2개의 부모태그를 선언해 주고 banner의 공통적 클래스와 각각 의 이미지를 표현할 수 있는 banner1,2 클래스를 선언해 주고 txt 도 부모태그를 묶어서 각각 banner 1,2의 위치시켜 준다. (같은 정렬상의 글씨들은 하나하나 따로 움직이지 말고 둘 다 1개의 부모박스로 묶어서 움직이는 게 좋다)
-banner에 가로*세로( 100%)씩 선언해 주고 position :absolute 선언 공통적으로 이미지에 적용될 css를 같은 명칭 클래스에 적용해 놓고 banner1,2에 서로 다른 css를 적용시켜 준다 url을활용해 다른 이미지와 한 개는 지금 사이트에서 보일 위치에 놓고 나머지 이미지는 left :100% 을 주어서 오른쪽으로 화면에 안 보이게 이동시켜 줄 것이다.
이렇게 오늘 실습을 하면서 어려웠던 부분을 다시금 손코딩으로 연습을 해보았다.
아직 구조 짜는 게 어렵게 느껴지기도 하는데 그래서 하루하루 1개라도 배운다는 생각으로 꾸준히
하려고 노력 중이다.!