코린이 공부장

문자 관련 스타일 ✨01. font-family 문자의 글골을 지정하는 속성이다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있다. font-famliy: '돋음', Dotum, Arial, Helvetica, sans-serif; ✨02. font-size ▲px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size; 12px; ▲ % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size:150%; 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px가 된다. 만약 부모 요소가 10px이었다면 150%는 15px가 될것이다. ▲vw, vh vw는 뷰포트 너비값..

grid layout grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요하다. 이미지출처 ✨네개 짜리 박스를 마크업한다 header sidemenu content footer ✨이 박스에 grid layout을 사용한다고 선언 .wrap{ display: grid; } ✨가로로 2칸 세로로는 3칸이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정한다. .wrap{ display: grid; grid-template-colums: 30% 70%; grid-template-rows: 50px 150px 50px } ✨다음으로 각 칼럼의 경계선 번호를 알아야 한다. 칼..

flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다. display: flex; display: -webkit- flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 암을 때 항목의 크기를 늘려 채워주는 방법을 정의. 속성 값 속성 설명 0 (기본 값) 1 항목들이 모두 1이면 같은 크기 양수 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 flex-shrink 속성 값 속성 설명 0 공간이 부족해도 항목의 크기를 줄일 수 없음 1 (기본..

[ type 선택자 ] html 문서의 태그 이름을 선택자로 사용할 수 있다. ex) p { color: blue; } [ id 선택자 ] id 선택자는 HTML 요소 중에서 특정 요소를 선택하여 스타일을 적용할 때 사용된다. id 선택자는 요소의 고유한 식별자를 이용하여 선택한다. 즉, ID가 ID 이름과 같은 태그에 대해서 적용한다. ex) #아이디명 { 속성: 값; } [ class 선택자 ] 클래스 선택자는 .클래스이름 을 사용하여 나타낸다. 클래스가 클래스이름과 같은 태그들에 대하여 적용한다. ex) .ClassName { width: 100px; } [ 전체 선택자 ] 전체 선택자는 * 을 사용하여 나타낸다. html 의 모든 태그에 대하여 적용한다. ex)* { margin: 0 auto; ..

float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다. float - block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있다. - float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려할 때 유용하다. - float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징 된다. 그러나 heading요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않는다. 속성 값 속성 설명 left 요소를 왼쪽에 배치..

내부 스타일시트 - CSS를 HTML문서안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태이다. 예제 p{ color:red; }의 의미는 p태그 안의 글자 색상을 red로 설정하라는 뜻이다. 외부 스타일시트 - 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있다. -이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고 HTML에서는 태그를 이용하여 선언한다. -내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 된다. @ import - @import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용한다. CSS의 맨 윗줄에 기술한다. - @import는 어떤 CSS파..