[Front End] Do it! HTML+CSS+JAVASCRIPT 웹 표준의 정석 마무리(웹 사이트 만들기)

 책 뒤에 실습할 수 있는 부록 pdf가 있어서 이틀동안해서 마무리했다. 실제 웹 사이트를 만들 때 필요한 팁과 어려운 점을 조금 맛볼수 있어서 좋았다. 관련해서 정리해두면 좋을 것 같아서 글을 쓴다.

 

 옆의 사진과 같은 구성이 먼저 나왔다. 웹 사이트를 만들 때 무작정 코딩에 들어가는게 아니라 전체적인 틀을 구상해아 할 필요가 있어보인다. div를 사용해서 목적별로 파트를 나누어 묶었다. 이렇게 하니 작업의 순서를 어느 정도 정할 수 있는것 같다. 각 박스별로 하나씩 html코드와 css를 작성하니 헷갈림 없이 진행할 수 있었다. 요즘은 grid, flex box를 사용해서 전체 프레임을 짠다고 해서 걱정이 있었는데 간단한 사이트 정도는 div로도 충분한 거 같다.

 

 

 그 다음은 전체적인 틀의 디자인을 css파일에 작성해준다.

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
 }
 
 #container{
 margin: 0 auto;/*화면 중앙에 배치*/
 width: 원하는 값
 }

container의 전체 width를 잡아주는 것만 변경하고 나머지 소스는 초기화하는 용도로 사용하면 될 것 같다.

 

 처음에 큰 틀을 잡아놓았으니 그 안에서 요소들을 관리해야한다. 그러다 가끔 사진같은 파일의 크기가 커서 영역을 벗어날 경우가 생기면 

overflow:hidden;을 작성하면 된다. => 부모 요소의 크기보다 자식 크기가 크면 넘어가는 부분 안보이게 해준다.

 

 요소의 height를 지정할 때 %를 사용하면 편리한데 이때 %는 부모 요소의 height가 기준이 된다. ex) 부모 요소의 height 값이 200px;일 때 자식 요소의 heigth값이 50%면 자식 요소의 height는 100px이 되는 것이다.

 

 글자를 정렬할 때 text-align:center는 가로 정렬이고 세로 정렬까지해서 정중앙에 위치하게 하고 싶으면 해당 요소의 부모 요소의 height값과 동일하게 line-height 값을 작성해주면 세로 정렬이 된다.

 

 nav를 짤 때 하나의 큰 타이틀 밑에 서브 메뉴가 더 존재한다면 li태그를 닫기 전에 새로운 ul을 하나 더 만들어 주면 된다. 이 부분은 생각하지 못했었는데 코드를 이해하고 격한 끄덕임을 했다.

<ul>
 <li>수학
 	<ul>
    	<li>미적분</li>
        <li>확통</li>
 	</ul>
 </li>
</ul>

 동적으로 보이게 하고 싶으면 두번째 ul은 display:none 해놓고 수학 부분이 :hover 되면 display:block하면 된다.

 

 z-index는 어떤 것이 위에 나올 것인지를 정해준다. 어떤 박스나 컨텐츠가 겹친다면 z-index값을 각각 주어서 해결할 수 있다. 속성값이 높은 요소가 위에 나오게 된다. 주위할 점은 부모 요소, 자식 요소가 둘 다 z-index를 갖고 있다면 부모 요소의 값이 우선시 처리된다. 즉 아무리 자식 요소가 높아도 부모 요소의 속성값이 낮으면 자식 요소는 밑에 위치하게 된다.

 

entity는 기본적인 도형 등을 표시해주는 html 코드다 좌, 우 화살표 같은 것등이 있다.

 

opacity는 요소의 투명도를 정하는 값이다. background-color:transparent는 배경색을 없게한다. (투명)

 

:hover 마우스 올려둘 때, :active 클릭하고 있을 때 (마우스 왼쪽 때는 순간 끝남), :focus 커서 깜빡일 때

 

 책에 있는 코드 안보고 하려고 우여곡절이 있었지만 나름 재밌었다. 새로운거 하나 만들어 볼까..