Semantic Elements
Semantic Element
== elements with a meaning
즉
<div> <span> 같은 것을 non-semantic 요소로 본다면,
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
이런 것들은 semantic 요소라고 볼 수 있다.
만능에 가까웠던
<div> 태그를 대체할 태그라고도 볼 수 있다.
몽땅 같은 이야기를 적는 것은 무의미하므로
참조 사이트:
https://www.w3schools.com/html/html5_semantic_elements.asp
Layout - Float
포지션에 이은, 레이아웃을 잡기 위한 또 다른 프로퍼티 중 하나
기본적으로 float은 이미지 주위를 텍스트로 감싸기 위해 만들어졌으나,
그러나 페이지 전체의 레이아웃 을 잡을 때도 중요
float 속성으로는 left, right, none 중 하나를 가질 수 있음
근데, 그냥 float을 주면 부모를 인지하지 못해서
내가 float을 준 요소가 부모 요소 밖으로 마구 튀어나올 수 있다
그래서 사용하는 방법 중 하나가
바깥 div에 overflow: hidden을 주는 것인데 이게 무슨 말이냐면
// html
<div class="wecode-box last-box">
<img class="float-right" src="https://s3.ap-northeast- 2.amazonaws.com/cdn.wecode.co.kr/logo/wecode_logo_bk.png">
<p>이게 젤 낫네</p>
</div>
// css
.wecode-box {
border: 1px solid #ddd;
}
.float-right {
float: right;
}
.last-box {
overflow: hidden;
}
이런 식으로 쓰게되면,
하하 이렇게 깔끔하게 탄생할 수 있다~!
고생했던 Float 실습 문제 Review
Q. 이 문제를 풀 때 나의 의문
- float 관련해서 포스트도 몇 개 읽고 튜토리얼도 봤는데, 뭔가 머리에 들어온 것 같기는한데 머리에 들어온 게 없어서 지금 뭘 사용해야할지 모르겠다.
- Assignment1을 보니 사이드바를 왼쪽에 위치시키는 것 같은데 그럼 그냥 float: left로 하고 말 일인지, 아니면 main contents에 대한 값을 또 따로 줘야하는 지 모르겠다.
- Assignment1과 Assignment2는 배너의 레이아웃이 동일하고 main contents와 사이드바의 위치만 반대로 되어있는데 .main-page와 .home-page를 따로 클래스를 정의할 때 어디까지 따로 해야하는지 헷갈린다.
근데 내가 HTML/CSS 조금 해보니까(지금까지 살면서 약 40시간 정도 했음)
역시 답은~! 내가 직접 해보는데에 있어서
그냥 다 직접 한 땀 한 땀 해보았다 ;;;
// html
<h3>assignment 1</h3>
<div class="main-page">
<header>배너</header>
<aside>사이드바</aside>
<section>main contents</section>
</div>
<h3>assignment 2</h3>
<div class="home-page">
<header>배너</header>
<aside>사이드바</aside>
<section>main contents</section>
</div>이렇게 HTML을 구성하는 것까지는 이미 wecode에서 짜줬는데, 문제는
css를 어떻게 구성할 것이냐에 몰려있었는데
// css
header {
background-color: yellow;
}
section {
background-color: blue;
}
.main-page aside {
background-color: green;
width: 200px;
float: left;
margin-right : 10px;
}
.home-page aside {
background-color: green;
width: 200px;
float: right;
margin-left: 10px;
}
결국 내가 택한 방법은 aside 즉, 사이드 바만 값을 따로 주는 방법-!
점심 시간에 wecode 동료들에게 자문을 구했었는데 다들 사이드 바에만 값을 줬는데
알아서 main contents는 조정되더라는 이야기를 듣고 실행했다.
그리고 실행 결과는 아래와 같다.
음 이정도면 나는 만족하는 답안이 나왔다~!
여기서 알 수 있었던 것은
가로 길이를 적당하게 정하고(지금 이 문제에서는 200px) float을 주면
나머지 요소 (나의 경우는 main contents)는 알아서 뒤로 따라 붙는다는 것이다
