CSS Layout : Flex와 Grid CSS layout에는 Flex와 Grid가 있다. CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다. 둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다. 더보기 flexbox - container에 적용되..
2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적..
CSS position 속성은 요소를 배치하는 방법을 지정한다. position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다. Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 사용 예시 : See the Pen Sticky CSS by hyoeun (@hyonixk) ..
지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내.. hyoni-k.tistory.com 이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다. object-fit : 이..
텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다. 1. 텍스트의 두께를 상대적으로 무겁게 하여 강조 font-weight: bold; 2. 텍스트의 색상으로 강조 color: red; 3. 텍스트의 배경에 색상을 주어 강조 background-color: #fdd000; 4. 텍스트에 언더라인을 주어 강조 text-decoration: underline; text-decoration: underline dotted blue; (underline 속성에 대한 학습은 여기(MDN)를 참고) 텍스트에 단순히 text-decoration: underline으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에..
CSS Preprocessor(전처리기) CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.) CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다. 즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름) SASS와 SCSS의 차이점? SCSS는 CSS구문과 ..
본 글은 MDN의 자료를 보고 스터디하며 작성했습니다. 지난 글에서 상대 길이 단위인 em, rem에 대해 알아봤는데, 이번 글에서는 길이 단위들을 간략히 정리한다. em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 �� hyoni-k.tistory.com 절대 길이 단위는 그 어떤 것(환경이나 요소)에도 영향을 받지 않고 항상 동일하게 그대로 유지된다. css에서 px을 사용하는데 px를 제외한 나머지 단위들은 보통 인쇄에서 유용하게 사용된다. 반면에 상대 길위 단위는 root 요소의 폰트 크기나 viewport(사용..
지난 글에서 의 유형에 대해 알아봤는데, 이번 글에서는 을 컨트롤하는 속성에 대해 알아보고자 한다. 의 유형 input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. input 요소는 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 있어, HTML에서 제일 강력하고 복잡한 요 hyoni-k.tistory.com 요소의 속성 input에는 다음과 같이 다양한 속성들이 있다. 다양한 속성 중에서도 조금 더 알아볼 속성은 autocomplete과 input:focus이다. 사용자가 텍스트를 입력하기 위해 입력 필드를 클릭하면 아래 이미지에서 보이는 것처럼 선이 생기거나, 자동완성을 허용한 상태로 입력 필드가 뜬다. 이러한 특성을 제어하고자 한다면 다음의 속성을 사용해보자...
Text content HTML 텍스트 콘텐츠를 사용하여 여는 와 닫는 태그 사이의 블록이나 컨텐츠 구획을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별하는데 사용하기 때문에 접근성과 SEO(검색 엔진 최적화)에 중요하다. 출처 MDN 텍스트 구조와 목록을 만드는 등의 방법을 알고 싶다면 아래를 참고 HTML text fundamentals That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more sem..
Content sectioning 컨텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다. 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. (사용의 예로 게시판, 매거진, 뉴스 기사 등이 있다.) 하나의 문서가 여러 개의 을 가질 수 있다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 요소가 되며, 그 안에는 또 여러 개의 이 존재할 수 있다. 요소의 특성과 사용 : 전역 특성(Global attributes)이 있어 HTML에서 전역으로 사용할 수 있는 특성이 있다. 각각의 을 식별할 수단이 필요하며, 주로 제목(~) 요소를 의 자식으로 포함하는 방법을 사용한다. 요..