본문 바로가기

CSS33

CSS에서 스타일의 우선순위를 정해보자(@layer) CSS의 경우 사용자가 지정한 레이어의 순서에 따라 스타일이 정해진다. 이러한 우선순위 때문에 원하는 스타일이 적용되지 않는 경우가 있는데, @layer를 사용하면 스타일의 순서를 결정할 수 있다. @layer 레이어이름, 레이어이름, ....; 반갑습니다. 왼쪽의 경우 @layer을 설정해서 bgfont가 제일 마지막으로 설정되게 했고, 오른쪽의 경우 @layer을 설정하지 않았을 때의 상태(CSS는 위에서 아래로 적용되기 때문에, 배경색은 bg로 설정되고 글씨크기는 font로 설정됨)이다. 2024. 7. 13.
CSS에서 계산을 해보자 (calc()) calc()를 사용하여 CSS 속성 값으로 계산식을 지정할 수 있다. 덧셈(+), 뺄셈(-), 나눗셈(/), 곱셈(*)이 가능하며 length, frequency, angle, time, percentage, number, integer을 받는 속성의 값으로 사용할 수 있다. 숫자와 연산자 사이는 반드시 띄어쓰기를 해야한다. calc(숫자 연산자 숫자) 아래의 예제는 div들의 width를 100%에서 20% 뺀 값으로 지정했고, height를 100% 에서 3을 나눈 값으로 지정한 예제다. 공지사항 아래와 같은 사항에 대해 공지를 합니다. 문의사항 문의사항에 대해서는 관리실로 문의해주세요.  아래의 사진처럼 calc()를 통해.. 2024. 7. 13.
CSS의 사용자 지정 속성(CSS Custom properties) 설정하기 CSS의 프로퍼티를 사용하여 문서 전반적으로 재사용할 임의의 값을 담을 수 있다. 디폴트 값이나 반복적으로 사용되는 스타일의 경우 :root(문서 전체에 할당되는 css)에 선언한다. 변경되지 않는 값은 :root에 지정하여 사용하고, 국소적으로 사용되는 값의 경우에는 사용하는 위치에 선언하는 것을 권장한다.--변수명사용 시 var(--변수명)을 작성하여 사용이 가능하다.CSS Custom properties 작성방법대소문자를 구분한다. CamelCase 기법 사용가능특수문자 사용 불가능 (@,^,& 등)  See the Pen css custom properties by coding-ji (@coding-ji) on CodePen. 2024. 7. 13.
CSS의 grid를 함께 공부해보자 - 2. 이름을 사용한 그리드 배치 이전 글에 그리드의 기본에 대해 적었었다. 이전 글에서는 그리드의 선들의 번호를 통해서 배치를 했다고 하면, 이번에는 그리드의 영역에 이름을 배치하고 아이템을 해당 이름의 영역에 넣는 방식을 적어 볼 예정이다.grid-template-areas:'영역1 영역2 영역3''영역4 영역5 영역6' ;이 방법은 grid-template-columns와 grid-template-rows를 통해 행과 열의 길이를 설정해야 한다.grid-template:'영역1 영역2 영역3' 행1의 높이'영역4 영역5 영역6' 행2의 높이 / 열1의길이 열2의길이 열3의길이;영역을 이름으로 설정하고, 행과 열의 길이까지 한번에 작성하는 방법이다. grid-area: 영역이름; 설정한 이름을 가지고 해당 영역에 넣는 방법은 grid.. 2024. 7. 13.
CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 그리드(grid)는 수평선과 수직선으로 이루어져 격자형 배치가 가능한 레이아웃이다. 그리드의 경우 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있어 웹 페이지를 생성하는데 용이하다.display: grid | inline-grid ; 그리드 관련 용어grid-container그리드 요소를 포함하고 있는 공간grid-item 그리드 컨테이너 내부에 표시되는 그리드 컨테이너의 자식요소track그리드의 행과 열을 의미한다.cell그리드에서 한 칸을 의미한다.line그리드에서 셀들의 구분 선을 의미한다.number그리드 라인의 각 번호를 의미한다.gap그리드 셀 사이의 간격을 의미한다.grid-area그리드 라인으로 둘러쌓인 영역을 의미한다. 그리드 설정하는 법 (number 사용 방법)grid-template-.. 2024. 7. 13.
HTML + CSS로 간단한 홈페이지 만들기 실습 flex까지 배운 상태에서 정말 간단한 홈페이지를 만드는 실습을 해봤다. 실습을 계속해서 하고 있기는 하지만, 역시 지식으로 아는 것과 직접 하는 것은 엄청난 차이가 있다는 것을 새삼 실감한다.  HTML 시맨틱 태그로 홈페이지 내용을 작성함메뉴(nav)의 경우 태그 사용 및 display: inline-block; 을 사용함header와 footer의 경우에는 배치를 하기 위해서 display: flex; 적용함main에 display: flex;를 사용하여 section과 aside를 배치함 nav의 경우 display: sticky;를 주어서 밑으로 스크롤을 해도 계속해서 상단에 유지될 수 있도록 함 미디어쿼리를 이용해서 max-width가 760px일 때 main 부분의 flex-direction.. 2024. 7. 13.

티스토리툴바