IT/Html 2020. 3. 30.
[SCSS/CSS] CSS를 마스터해보자! Flexbox의 첫번째 규칙
오늘부터 CSS를 알아보는 시간을 가지도록 하겠습니다. 공부한 내용을 가지고 포스팅을 진행합니다. 우선 간단한 html 파일과 css 파일을 만들었습니다. index.html 1 2 3 styles.css .box { background: blue; width: 300px; height: 300px; display: inline-block; color: white; } 은 아래와 같습니다. 현재는 전혀 flex에 대한 설정이 되어 있지 않은 상태입니다. 여기서 css를 변경해보도록 하겠습니다. body { display: flex; } .box { background: blue; width: 300px; height: 300px; color: white; } 현재 html 에서는 body태그가 div태그..
IT/Html 2018. 9. 5.
[CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자
CSS 그리드( Grid ) , 플렉스박스 ( Flexbox ) 에 대해서 알아보자 오늘 소개할 것은 바로 그리드(Grid)와 플렉스박스(Flexbox)입니다. CSS(종속형 시트 or 캐스케이딩 스타일 시트)의 종류 입니다. 레이아웃과 스타일을 정의할 때의 사용되는 언어로 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역활을 담당한다고 할 수 있습니다. 즉 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다는 뜻입니다. 그중 Flexbox 와 Grid 에서 많이 사용하는 언어를 알아보도록 합시다.이론보다는 한번 보는 것이 빠릅니다.보시죠! 아래와 같은 html 파일을 만듭니다. 물론 이 외에도 헤더와 바디가 있어야겠죠?우선 class..
