간단한 요약
쭉 Kidsgao 웹사이트 제작 수업을 진행하였다. 특별히 새로운 부분은 없었으며 배웠던 내용을 연습하는 과정이 대부분이었다.
배운 내용
1. img 태그
img의src를 잘못 작성하였을 경우,alt=""의 내용이 그 자리를 대신하게 됨
2. z-index
- 같은 값의
z-index라면, 후에 코딩된 요소가 상대적으로 위쪽에 배치됨 z-index를 따로 설정하지 않더라도 같은 3차원 상의 요소라면, 후에 코딩된 요소가 상대적으로 위쪽에 배치됨
3. css position Tip
- 어떤 요소를 배치할 때
margin과top/left/right/bottom의 차이
top/left/right/bottom의 경우 parents에position: relative;가 설정되어 있어야 배치가 수월하다. 없다면 브라우저가 기준이 됨
margin로 배치할 경우 parents의position: relative;와 관계없이 원래 기준점으로 이동하여 배치할 수 있다. - 2개의 block 요소 sibilings 관계에서, 나란히 놓고 싶다면 첫번째 sibling에
position: absolute;를 한 뒤, 두번째 sibling에margin값을 조정하여 X축 정렬을 할 수 있다.
4. float Tip
- 2개 이상의 영역을 배치할 때, A요소의 위치를
float: left;한 경우, B요소를 그 옆에 배치하기 위해서float: left;을 사용할 수 있다. 결과적으로 X축으로 나란히 정렬되는 효과 - 다만 주의할 점은, float을 적용한 영역의
width의 합이 그 영역(parents)들을 감싸는width를 넘어서는 안된다. 넘어선다면 layout이 틀어짐 - parents 요소에
overflow: hidden;을 사용하게 되면,float을 사용한 children 요소의 높이가 적용됨
어려웠던 내용
역시 어려웠던 내용은 없다. 또한 진행하고 있는 웹사이트 제작의 많은 부분이 반복/적용되는 곳이 많아 연습하기에 좋았다.
소감
헷갈리던 css 속성(float, position)들의 사용법이나 주의할 점들이 반복적으로 실습에도 사용이 되어 익힐 수 있어 좋았다.
나의 코드
여기에 업데이트 하였다.
