오늘은 그동안 배웠던 것 중에 헷갈리거나 알아두면 유용한 html구조를 보려고 한다.
학원 끝나면 와서 복습을 하는 편이다.
html에서 확실히 기능들을 알고 개발자도구(f12)와 이미지를 함께 보니 이해되는데 더 많아지는 것 같다.
앞으로 웹 2와 자바스크립터 가 남아있는데 다음 주부터 아마 진도를 빼지 않을까 생각한다.
기존에 했던 구조 실습도 마무리가 되어가고 내일은 html 관련해 평가를 하는 날이라 더욱 신경 써서 내용을
다시금 내용을 상기시키려고 한다.
※header
헤더 부분 만들 때 보통 왼쪽 오른쪽 중간 어떻게 놓는지 헷갈릴 때가 많다.(아직 초보자관점으로)
우선 위에 그림을 보면서 파악해 보고자 한다.
※header 구조 위치방법
- 구조를 보면 전체 header 박스 안에 3가지의 div박스들이 보인다. 그리고 그 안에 div 자식들이 있을 것이다.
- 왼쪽 메뉴들의 글씨는 float:left , display:inline-block 둘 중 1개로 가로 정렬을 해준다. 그리고 메뉴포함하는 박스를 postion을 이용해 헤더 젤 왼쪽 부분에 위치시켜 놓는다.
- 중간에 로고는 magin= o auto ; 로 헤더 중간에 위치시켜 놓는 방법도 있고 position을 이용해 헤더 부분 기준으로 width 값을 (calc((50% - (로고사이즈 px / 2)); 이렇게 했을 시 헤더 중간에 위치할 것이다.
-오른쪽 text 메뉴박스들도 왼쪽메뉴와 마찬가지고 float를 왼쪽정렬 해주고 position을 이용해 top , right로 위치시키는 방법과 float 오른쪽 정렬을 하는 방법이 있을 것이다
- float 쓸 때는 부모요소에다가 overflow:hidden을 걸어줘 넘치는 걸 방지해 주자.
-로고는 div 박스 안에 a태그를 위치시켜서 로고가 활성화될 수 있도록 해주고 ir 기법도 자주 적용해 주자
(ir기법:특별히 이미지를 보는 게 힘드신 분들을 위해 이 로고가 어떤 로고인지 텍스트로 대체해 알려줄 수 있다.)
※롱배너 구조 위치방법.
- 롱배너는 바깥에 부모박스를 전체 가로 크기와 세로로 이미지만큼 먹어주자 ( 이렇게 롱배너 img 넣을 시 img 박스 밖에 부모 박스를 깔아 둔다).
-롱배너를 100% 로 설정해 놓고 img 불러올 박스에는 이미지만큼의 가로 *세로를 설정하고, 위치를 시켜주면 바로 양옆에 배경색이 하얀색으로 되어있을 것이다.
이럴 때 f12 개발자도구를 활용해 기존이미지 바탕색이 어떤 값인지 알아내서 부모박스에 동일한 색을 깔아준다.
#<h> , <b> , <del> 태그 설명
-h태그와 b태그는 글씨에 설정 시 위아래 자동으로 마진값을 갖고 있어서 위아래 여백이 있는 것처럼 보일 수 있다.
-h(1~6) 순서대로:글씨가 굶어지고 커지는 효과를 가지고 있다.
-b(단락태그) 글씨들을 한 단락 내에 위치시킨다.
-del: del 태그는 글씨 중간에 줄을 그어준다. 나중에 홈쇼핑 같은 거 할 때나 가격 같은 거 입력 시 보통 사용한다.
#img 박스 설명
- img태그 안에 넣을 때는 li나 div로 박스를 만들 어안에다가 a태그를 위치시키거나 반대로 a태그 안에 img태그를 적용하여 사용한다.
#이미지 눌렀을 시 천천히 커지는 방법
-transform (이미지 확대 시켜줌) , transition 천천히 나타나는 효과를 준다.( 글씨나 그림이나.)
-bacground :cover(% 퍼센트 이미지 커지게 하는 방법도 있음) transition을 적용해도 안 먹히니 transform 효과를 준다.
(위에 2개의 속성과 hover로 이미지가 천천히 커지는 효과를 줄 수 있다.
-backgrond 해서 url 이미지 줄 시 가로*세로 크기 같은 박스에 기재해 준다.
-img 태그 활용해 이미지 넣을 시 부모 박스에 가로*세로 사이즈 정하고 img에 가로 100% 를 줘서 맞춰준다.
#margin 겹침현상
-위, 아래 2개 박스에 마진을 위아래 주었을 때 두 박스 사이에 겹치는 부분은 자동으로 겹쳐지게 되므로 사이간격은 동일하고 유지된다.
# a태그 사용해서 이동하기
*외부이동
-href:https://이동할 사이트 url주소값을 적어준다.
-같은 폴도 다른 html파일로도 옮길 수 있는데
href에다가./img/구조실습(레진) 이렇게 해주면 다른 html에 옮겨진다.
-내부이동
-href: #(이동할 태그에 id 값을 입력해 준다.)
속성으로 target :-_self, 기본값이고 현재텝으로 이동시켜 준다.
target: _blank, 새 탭에서 링크 열린다.
#table태그 (가로, 세로값 줄 때)
-구조에서 가로나 세로값은 td 값에다가 수치를 입역 해야지 적용이 된다.
tr에서는 가로, 세로에 값을 줘도 적용되지 않는다.
#clear:both 어떨 때 사용이 되는가?
- 헤더 부분에서 부모에 overflow:hidden, 못쓰는 상활일 때, 높이값을 몰라서 margin-top으로 윗공간을 밀어내기 곤란할 때 사용한다.
- 보통 헤더 부분이나 컨테이너 부분에 float를 활용해 이동했을 때 overflow:hidden을 주지 못할 때 이 부분은 하늘에 붕 떠있는 상태이다. (그래서 이 헤더 부분 아래에다가 박스를 주게 되면 맨 위에 부분으로 말려 버린다.
- 이럴 때 말려드러 간 박스에다가 clear:both를 주면 말려들어가지 않고 그 붕 떠있는 헤더 부분아래에 위치가 된다.
(하지만 이렇게 위치시켜도 margin-top으로 박스사이의 간격을 떨어 뜨리고자 할 때 높이값을 모르니 막일 대입을 해서 줄 것이다.
이런 경우에 이 박스에다 div 박스를 1개 감싸서 부모 박스를 만들어준다. 이 부 모박스에다가 clear:both와 position을 걸고
다시 자식박스에다가 position과 사방값을 활용해 위치를 이동시켜 박스 사이 여백을 맞추는 방법이 있다.