Today Hailie Learned

1. 디스플레이 크기에 따른 body요소의 background-color 변경하기 0~767px 이면 : gold 768px~1024px 이면 : lightblue 1025px~ 이면 : lightpink @media screen and (max-width: 767px) { body {background-color: gold;} } @media screen and (min-width: 768px ) and (max-width: 1024px) { body {background-color: lightblue;} } @media screen and (min-width: 1025px) { body {background-color: lightpink;} } ⬆️위 식처럼 정직하게 크기별로 3가지 색상에 대한 식을..

미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것이다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다. @media(at media) 미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일하다. @media mediaqueries { /* style rules */ } @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻이다. 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어간다. 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나..

HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 합니다. 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됩니다. https://validator.w3.org The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org

요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다. 이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다. 이것을 정하는 것이 바로 z-index의 역할입니다. 쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있다. z-index 속성 기본 값 : auto 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다. z-index: auto | number | initial | inherit; auto 쌓임 순서를 부모와 동일하게 설정(기본값) number 해당 수치로 쌓임 순서를 설정(음수 허용) /z축의 순서를 지정/ z-index: 1;​ position 값이 static이 아닌 경우 지정가능 순서 ..

position 속성 요소의 위치를 정하는 방법을 지정하는 속성입니다. 기본 값 : static position: static | absolute | fixed | relative | sticky | initial | inherit; static Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값) absolute 부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어나고, display를 block으..

float 속성 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다. 레이아웃을 만들 때 영역을 좌우로 분할할 때 사용하는 용도로 선언한다. 기본 값 : none float: none | left | right | initial | inherit; none float 시키지 않음(기본값) left 좌측으로 float 시킴 right 우측으로 float 시킴 요소를 보통의 흐름에서 벗어나 띄어지게 함 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등) https://codepen.io/yongwon/pen/VjgqgN float ... codepe..

visibility 속성 요소의 화면 표시 여부를 지정하는 속성입니다. 기본 값 : visible visibility: visible | hidden | collapse | initial | inherit; visible 화면에 표시 hidden 화면에 표시되지 않음(공간은 차지함) collapse 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) / 익스프로어, 파이어폭스에만 사용 visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */ visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지..

display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 / 그 구역만 차지 block block level 요소처럼 렌더링 / 전체 다 차지 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다. 배치는 inline처럼, box model은 block처럼! 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 inline level 요소 사이의 공백과 개..

font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한다. font-family 속성 글꼴을 지정하는 속성입니다. font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-fam..

width width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성이고, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. 크기를 지정한다는 것은 같지만, 요소의 종류나 특징에 따라서 다르게 동작하기도 한다. 요소의 가로 크기를 지정하는 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다. 블록&인라인 강의에서 다룬 블록 레벨 요소와 인라인 레벨 요소의 특징을 되짚어보시기 바랍니다. width 속성 기본 값 : 0 auto 브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 ..