나는 너무너무 궁금했었다.. 어떻게 글자가 자동으로 줄바꿈이 되게하고,, 가독성을 높일 수 있는건지..
방법은 여러개가 있는듯 해서 배운 것을 위주로 정리를 해보려고 한다!
🔻grid 사용하기
◼ html 살펴보자
<html>
<body>
<style>
#container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
div {
border: 3px solid red;
}
</style>
<div>TOP</div>
<div id="container">
<div>LEFT</div>
<div>CENTER</div>
<div>RIGHT</div>
</div>
<div>BOTTOM</div>
</body>
</html>이 코드를 해석해보면,
구조
영역은 총 TOP, container(LEFT, CENTER, RIGHT), BOTTOM으로 크게보면 3개 유심히 보면 5개로 구성되어있다.
배치
css를 해석해보면, main이라고도 볼 수 있는 container 영역을 grid로 지정하고, grid-template-colums를 통해 같은 행 안에서 열 배치를 1fr, 2fr, 1fr로 주었다.
그 아래 div에 대한 css는 각 영역을 눈에 보이게 하기 위한 장치이므로 무시하자.
결과
정말 감동적인 결과가 나온다.. 내가 원했던 바로 그것,, 그치만 여기서 더 공부해야할 부분이 생긴다. 바로 fr, em, rem, px 등 수치에 대한 값을 이해할 필요가 있다. 그리고 grid를 더 폭 넓게 보기 위해 다른 속성을 알면 좋을 것 같다.
🔻@media 사용하기
미디어쿼리를 사용하는 방법이 있다.
미디어쿼리의 기본 원리는 특정 조건 하에서 css를 대체 또는 추가하는 것이다.
마우스를 갖다 대면~ 이라는 조건이 가능해서 이 기능에 한정하여 주로 실습하였는데, 조건부 성질과 float를 이용하면 잘 해볼 수 있다.
공부하던 당시 w3school의 웹사이트 에서 참고하여 필기해둔 내용을 적어두었다.
◼ media query 알아보기
- you can apply styles to only those screens that are greater, or smaller, than a certain width.
> 적용 방법
@media not/only mediatype and (mediafeature and/or/not/ mediafeature) { CSS -code;
}- only는 현대 브라우저에서는 no effect
- media types
- all: 디폴트
- print: 프린터기
- screen: computer screen, tablets, smart-phones etc.
- speech: screenreaders that reads the page out loud
- media features
- aspect-ratio: the ratio betwen the width and the height of the viewport
- color
- hover height width 등등등
◼ 폭 줄였을 때 층지게 만들기
아무튼 위에서 언급한 건 하나도 중요하지 않고, 그래서 어떻게 웹사이트를 디자인할 수 있냐는거다.
위에서 이미 언급했다시피, float 성질을 이용하면 된다.
- float은 둥둥 떠다니는 속성이 있는데, 여러 div나 article의 width 합이 100%를 넘어가면 아래로 깨져버리는 현상이 나타난다. 바로 이 점을 이용하여 햄버거 메뉴 style을 만들 수 있다.
- 예제코드는 없다^^
🔻boostrap 사용하기
boostrap은 라이브러리로, 생활코딩 이고잉 선생님의 영상에도 아주 친절하게 나와있다.
- 정확히는 Layout > Grid 를 참고하면 된다.
- 먼저 같은 행의 각 열로 배치할
<article>을 "col" class로 정의하고 - 같은 행이 될
<div>를 "row" class로 정의한다 - 그리고 이것이 모두 .container에 담는다!
엇 그렇다면 혹시 1 container 안에 many rows가 가능한가? 궁금.
- boostrap은 기본적으로 화면을 12칸으로 나누어두고있기 때문에 간격 조정은 더했을 때 12가 되도록 col을 세분화함으로써 가능하다.
<article class="col-2"></article>
<article class="col-10"></article> - 그리고 우리는
col-sm-2,col-md-2처럼 코드에 breakpoint를 심을 수 있는 기능까지 누릴 수 있다.
boostrap과
<head>내<style>태그를 사용한 css의 효과는 둘다 반영될 수 없는 것으로 보인다. 내 경우, dev tool을 봐도 기본 css는 boostrap을 이기지 못하고 취소선 행을 면치 못했다. 이 이유에 대해서는 인터넷에 일부 소개가 된 것 같고, boostrap에서 기본으로 제공하는 컬러명 이외의 것을 커스토마이징할 수 있는 방법을 올려두긴 했으나 나에겐 여전히 너무 어려워 추가 조사와 공부가 필요하다.
