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. 10. 13.
[HTML/CSS] HTML, CSS를 이용하여 간단 메인 페이지 만들어보기
HTML, CSS를 이용하여 간단 메인 페이지 만들어보기 문제가 있을경우에는 댓글 달아주시면 페이지를 삭제하도록 하겠습니다. 동영상을 보며 공부한 내용을 바탕으로 간단한 사이트를 html과 css를 이용하여 비슷하게 만들기를 시작하였습니다. 크롬이나 다른 개발자도구, 검사를 이용하여 위와 같은 방법으로 html 태그와 CSS 확인이 가능합니다. 이 포스팅을 보기전에 전에 포스팅한 CSS Flex 와 Grid를 먼저 보시는것을 추천드립니다. 2018/09/05 - [IT/프로그래밍] - [CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자 자 그럼 간단하게 홈페이지를 만들어 보도록 하겠습니다. Visual Studio Code 를 이용하여201..
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..
