본문 바로가기

Web design/HTML & CSS21

[CSS] Grid : CSS Layout 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. 10. 2.
CSS의 새로운 기능 (2022 구글 I/O 주요 기능) 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 규칙을 적.. 2022. 6. 17.
[CSS] Position : Sticky CSS position 속성은 요소를 배치하는 방법을 지정한다. position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다. Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 사용 예시 : See the Pen Sticky CSS by hyoeun (@hyonixk) .. 2021. 2. 20.
[CSS속성] 이미지 제어 : object-fit과 object-position 지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내.. hyoni-k.tistory.com 이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다. object-fit : 이.. 2021. 2. 20.
[CSS속성] 텍스트를 강조하는 방법 텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다. 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으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에.. 2020. 12. 3.
CSS Preprocessor, SASS, SCSS CSS Preprocessor(전처리기) CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.) CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다. 즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름) SASS와 SCSS의 차이점? SCSS는 CSS구문과 .. 2020. 10. 15.
반응형 웹 디자인/레이아웃 : 미디어쿼리와 뷰포트 반응형 웹 디자인은 별도의 특별한 기술이 아니다.웹 페이지를 다양한 디바이스의 해상도 및 규격에 맞게 레이아웃을 유연하게 적용(반응)하도록 하기 위해 알아야 할 사항이 있을 뿐이다.  반응형 웹을 제작하기 위해 알아야 할 사항으로는 반응형 이미지 및 타이포그래피 개념과 CSS Media Query(반응형 디자인의 핵심적인 구성요소)라고 할 수 있을 것 같다.    미디어 쿼리 미디어 쿼리는 미디어 유형과 화면 해상도, 뷰포트의 너비 등에 따라 웹이나 앱의 스타일을 수정할 때 사용한다. 미디어 쿼리를 한다는 것은 웹 브라우저에게 질의를 던지는 것이다. 모바일 너비를 640px, 데스크톱 너비를 1024px로 한다는 가정하에 "현재 브라우저 너비는 640px이 맞습니까?" 질의를 던지며 뷰포트가 640px이.. 2020. 8. 21.
길이 "단위"에 대하여 본 글은 MDN의 자료를 보고 스터디하며 작성했습니다. 지난 글에서 상대 길이 단위인 em, rem에 대해 알아봤는데, 이번 글에서는 길이 단위들을 간략히 정리한다. em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 �� hyoni-k.tistory.com 절대 길이 단위는 그 어떤 것(환경이나 요소)에도 영향을 받지 않고 항상 동일하게 그대로 유지된다. css에서 px을 사용하는데 px를 제외한 나머지 단위들은 보통 인쇄에서 유용하게 사용된다. 반면에 상대 길위 단위는 root 요소의 폰트 크기나 viewport(사용.. 2020. 8. 13.
em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글을 통해 em, rem은 대략 무엇이고 em, rem을 px 단위로는 어떻게 되는지 알 수 있습니다.본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다.  보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 위해 상대적인 길이 단위가 아닌 절대 길이 단위인 px을 자주 사용한다. 절대 길이 단위는 편리하지만 (목적에 따라) 사이즈가 제각각인 여러 디바이스에서 어떻게 보일지 생각해 볼 필요가 있다. 다양한 디바이스 및 브라우저의 스크린 사이즈에 대응하기 위해 반응형으로 작업한다면 상대적인 길이 단위로 사이즈를 지정해야 할텐데 이때 em, rem 등을 사용한다.(상대 길이 단위로는 em, ex, rem, ch, 1h, vw, .. 2020. 8. 13.
<input> 요소의 속성 지난 글에서 의 유형에 대해 알아봤는데, 이번 글에서는 을 컨트롤하는 속성에 대해 알아보고자 한다. 의 유형 input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. input 요소는 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 있어, HTML에서 제일 강력하고 복잡한 요 hyoni-k.tistory.com 요소의 속성 input에는 다음과 같이 다양한 속성들이 있다. 다양한 속성 중에서도 조금 더 알아볼 속성은 autocomplete과 input:focus이다. 사용자가 텍스트를 입력하기 위해 입력 필드를 클릭하면 아래 이미지에서 보이는 것처럼 선이 생기거나, 자동완성을 허용한 상태로 입력 필드가 뜬다. 이러한 특성을 제어하고자 한다면 다음의 속성을 사용해보자... 2020. 7. 27.
HTML Text Content 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.. 2020. 7. 17.
HTML 컨텐츠 요소와 <article> Content sectioning 컨텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다. 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. (사용의 예로 게시판, 매거진, 뉴스 기사 등이 있다.) 하나의 문서가 여러 개의 을 가질 수 있다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 요소가 되며, 그 안에는 또 여러 개의 이 존재할 수 있다. 요소의 특성과 사용 : 전역 특성(Global attributes)이 있어 HTML에서 전역으로 사용할 수 있는 특성이 있다. 각각의 을 식별할 수단이 필요하며, 주로 제목(~) 요소를 의 자식으로 포함하는 방법을 사용한다. 요.. 2020. 7. 17.
animation과 @keyframes CSS의 animation은 스타일과 애니메이션을 적용하고, 애니메이션의 중간 상태는 @keyframes을 이용해서 변화를 준다. animation MDN animation @keyframes @keyframes는 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있다. 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다. MDN keyframes 다음은 animation과 @keyframes를 이용해 간단히 만들어본 애니메이션이다. 360도 무한 회전하는 애니메이션 예제 : 2020. 7. 15.
background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내용을 스크롤하면 배경 이미지는 고정된 상태로 스크롤 된다. fixed : 뷰포트(현재 문서가 전체 화면 모드로 표시되는 경우, 화면)를 기준으로 고정된다. 요소에 스크롤 메커니즘이 있어도 배경은 내용과 함께 움직이지 않는다. local : 요소의 내용을 기준으로 고정된다. 요소에 스크롤 메커니즘이있는 경우 배경은 내용과 함께 스크롤된다. 그리고 배경의 이미지 영역과 위치 지정 영역은 내용의 스크롤 가능 영역에 상대적이다. 즉, 아래 두가지 코드는 다르게 표현된다. ba.. 2020. 7. 14.
background-position : 배경 이미지 위치 background-position은 이미지나 영상을 배경으로 둘 때, 위치를 지정하는 속성이다. background-position initial : 기본값으로 둘 때 inherit : 부모 요소의 속성값을 상속받고자 할 때 top, right, bottom, left, center, length(길이 단위), percentage(%) .. CSS 속성마다 배경 이미지의 수평 및 수직 위치를 정할 때 아래의 속성을 사용한다. position-x는 수평 위치를, position-y는 수직 위치를 설정하며, 설정한 레이어를 기준으로 위치하게 된다. background-position-x background-position-y 적용 예시 : 2020. 7. 14.
반응형

티스토리툴바