나는 너무너무 궁금했었다.. 어떻게 글자가 자동으로 줄바꿈이 되게하고,, 가독성을 높일 수 있는건지..
방법은 여러개가 있는듯 해서 배운 것을 위주로 정리를 해보려고 한다!
<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를 더 폭 넓게 보기 위해 다른 속성을 알면 좋을 것 같다.
미디어쿼리를 사용하는 방법이 있다.
미디어쿼리의 기본 원리는 특정 조건 하에서 css를 대체 또는 추가하는 것이다.
마우스를 갖다 대면~ 이라는 조건이 가능해서 이 기능에 한정하여 주로 실습하였는데, 조건부 성질과 float
를 이용하면 잘 해볼 수 있다.
공부하던 당시 w3school의 웹사이트 에서 참고하여 필기해둔 내용을 적어두었다.
@media not/only mediatype and (mediafeature and/or/not/ mediafeature) { CSS -code;
}
아무튼 위에서 언급한 건 하나도 중요하지 않고, 그래서 어떻게 웹사이트를 디자인할 수 있냐는거다.
위에서 이미 언급했다시피, float 성질을 이용하면 된다.
boostrap은 라이브러리로, 생활코딩 이고잉 선생님의 영상에도 아주 친절하게 나와있다.
<article>
을 "col" class로 정의하고<div>
를 "row" class로 정의한다 엇 그렇다면 혹시 1 container 안에 many rows가 가능한가? 궁금.
<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에서 기본으로 제공하는 컬러명 이외의 것을 커스토마이징할 수 있는 방법을 올려두긴 했으나 나에겐 여전히 너무 어려워 추가 조사와 공부가 필요하다.