불로구

플렉스 박스 레이아웃 - 그리드 레이아웃을 기본으로 해 플렉스 아이템을 원하는 위치에 배치하는 것 - 아이템의 크기뿐 아니라 방향, 순서, 정렬 방법, 간격 등을 제어 가능 ​ 사용하기 위해선? - 콘텐츠를 플렉스 컨테이너로 묶어야 한다. - 그 후 컨테이너 안에 플렉스 박스를 배치 - 주축(가로)을 따라 왼쪽에서 오른쪽으로 배치되고 주축의 끝점까지 닿으면 교차 축(세로)을 따라 아래로 이동 - 그 후 다시 왼쪽에서 오른쪽으로 배치되는 형식 플렉스 컨테이너(부모 박스) - 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소 플렉스 아이템(자식 박스) - 플렉스 박스 레이아웃을 적용할 대상 주축 - 플렉스 컨테이너 안에서 플렉스 아이템을 배치하는 주 방향, 기본으로 수평 교차 축 : 주축과 교차되는 방향, 기..

셀렉터란? - HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능! ​ 셀렉터의 유형 - 셀렉터에는 여러 가지 유형이 있다 태그의 이름이나, id, class 속성의 값을 셀렉터로 사용한다! - 여러 가지 셀렉터를 조합도 할 수 있다. ​ style 안에 있는 h1, #list, .java, .python이 셀렉터이다! ​ #은 id를 나타내며, .(점)은 class를 나타낸다 ​ 결과를 예측해 보세요! . . . . . . ​ 예측했던 결과가 나왔나요? ​ - 셀렉터를 이용해 h1의 글자색을 파란색, 글자 크기는 2em으로 주었다 - 우선 ol 태그에 id 값을 list로 주고 글자색을 빨강, 글자 크기는 1em으로 주었다 - ol 태그 안에 li 태그의 java, python을 class로 각각..

CSS란? (Cascading Style Sheet)의 줄림말로써, HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다. CSS로 작성된 코드를 스타일 시트라고 부르며 색상, 배경, 텍스트, 폰트 등 여러가지 요소들의 옷을 입힐 수 있다. ​ 8강에서는 기본적인 속성만 알아보도록 하겠습니다! ​ CSS는 HTML의 head태그안에 style란 태그를 만들어 지정한다! ​ body{background-color : blue} - body 즉, 몸체의 배경색을 background-color 를 이용해서 파란색으로 바꾼다! ​ h1{color:green;} - h1의 의미는 다들 아시죠? h1태그로 만들어진 "안녕하세요"의 글자색을 초록색으로 변경한다! ​ hr{border :3px solid..

시멘틱태그 - 의미가 있는 태그, HTML5 문서를 구조화하는데 사용 1) - 페이지나 섹션의 머리말을 표현 ​ 2) - 하이퍼링크등을 모아 놓은 특별한 섹션, 목차를 만들기 위해 주로 사용 ​ 3) - 문서의 장, 절을 구성하는 역할 ​ 4) - 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역 ​ 5) - 중요 부분을 벗어난 내용을 담음, 페이지의 오른쪽 or 왼쪽 ​ 6) - 꼬리말 ​ 위치나 모양은 브라우저가 자동으로 정하지 않으므로 CSS3를 이용하여 직접 구현하여야 한다. ​ css3를 적용하면 이런 모양을 만들수 있습니다! - CSS3는 따로 포스팅하겠습니다 ^_^ ​ 혹시나 궁금한 점은 댓글로 남겨주세요!