🔑 코인 투자 추천 링크 🔑
CSS 강의목차
4. CSS 박스모델(padding,margin,border,content)
이번시간에는 지난번에 아래에 있는 본문을 목차 오른쪽으로 옮기기 위한 방법중, 그리드라는 기법을 사용해서 활용하는 법에 대해서 배우고 적용해보겠습니다.
먼저 grid.html 파일을 만들어봅시다!
1. div태그로 두 문자 작성하기
위와 같이 <div>태그로 NAVIGATION, ARTICLE를 작성합니다.
<div> 태그는 디자인을 위해서 작성하는 태그입니다.
<h1>은 제목태그라는 의미가 있지만, div는 각자 설정을 해주어야 합니다.
그리고 div태그는 block level element입니다.
참고로 <span>도 <div>랑 동일한데 inline level element입니다. 각 용도에 맞게 사용하시면 됩니다.
그럼 style태그에 div태그에 대한 속성값을 정해줍니다.
그리고 결과를 보면 아래와 같습니다.
2. div태그로 작성된 두 단어를 나란히 두기
먼저 부모태그가 필요합니다.
아래와 같이 div 부모태그를 만들고 id값을 grid로 지정해줍니다.
그리고 css 속성을 아래와 같이 설정합니다.
결과는 아래와 같습니다.
이제 이걸 grid를 사용해서 우리가 원하는대로 나눠보겠습니다.
grid속성에 아래와 같이 코딩합니다.
display:grid; (display에 grid를 사용한다는 뜻)
grid-template-columns:150px 1fr; (하나의 칼럼에 배치하고, 첫번째 칼럼은 150px로 지정해주고
두번째 칼럼은 나머지 공간을 다 사용한다는 뜻의 1fr을 사용합니다.)
똑같은 공간을 사용하려면 grid-template-columns: 1fr 1fr 이렇게 사용하시면 됩니다.
자, 결과는 이렇습니다.
그리드의 기능을 좀 더 보면, 두번째 div태그에 아래와 같은 긴 문장을 넣으면,
이렇게 표시됩니다.
이제, 우리가 목표로 했던 수업의 화면을 grid를 활용해서 적용해볼 수 있겠네요!!
아래 사이트는 우리가 사용하는 최신 기술이 모든 브라우저에 적용이 되는지 살펴보는 홈페이지입니다.
Can I use... Support tables for HTML5, CSS3, etc
If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself!
caniuse.com
위 사이트 접속후 아래와 같이 grid를 검색하면,
어느 브라우저에서 이 grid가 사용되는지 확인 가능합니다.
녹색은 사용이 가능한거고, 빨간색은 사용이 안됩니다.
태그를 사용하기전에 모든 브라우저에서 적용이 가능한지 살펴보고 쓰는 습관이 필요하겠죠?
3. 그리드 활용하기
3.1 먼저 본문의 두 내용을 div태그로 묶어줍니다.
부모 태그 div와 자식태그 div가 필요합니다.
먼저 ol태그와 본문의 내용태그 위에 <div id="grid"> 태그를 입력합니다.
두번째로 본문을 <div></div>태그로 묶습니다. 자식태그입니다.
요렇게 하시고, 마지막에 부모태그<div id="grid">를 닫아주는 </div>로 마무리합니다
3.2 <div>태그에 대해서 grid속성값을 입력합니다.
<head> 태그안에 <style>태그에서 grid 속성값을 아래와 같이 지정해줍니다.
#grid{
display:grid;
grid-template-columns: 150px 1fr;
}
자, 다 되었습니다.
짜잔!!! 아래와 같이 우리가 원하는 웹페이지가 완성되었네요!!!
4. 웹페이지 최종수정하기
마지막으로 조금만 이쁘게 수정해보겠습니다.
ol태그에서 아래 padding:20px에 마우스를 올려보시면 값수정이 가능합니다. 이걸로 적당한 값을 찾아냅니다.
padding 값을 30px로 수정해보니 아래와 같이 표시되네요!
왼쪽 메뉴는 잘되었는데, 오른쪽 분문이 문제네요.그래서 찾아서 수정해봅니다.
CSS 본문이 있는 태그를 찾아보니, div태그입니다. 이걸 한번 수정해볼께요~
수정하기 위해서 선택된 div 태그에 아이디 값을 지정해줍니다.
아래와 같이 id="article"라고 지정해주었습니다.
그리고 style태그에 아래와 같이 추가해줍니다.
#article{
padding-left:25px;
}
짜잔!! 드디어 완성되었네요!!
모두 수고하셨습니다.
다음시간에는 반응형 웹페이지에 대해서 살펴보겠습니다.
댓글