몽땅뚝딱 개발자

flex는 가로로 정렬하는 기준을 정하는 속성이라면 grid는 가로와 세로의 규칙을 모두 정할 수 있다. 위의 구성에서 상단의 2줄은 3x2로 구성되어있으며 엘리먼트가 총 6개이다. CSS는 다음과 같다. .box-wrap { display: grid; /* 컬럼의 개수와 너비를 지정한다. 나는 3개로 설정했다. */ /* 1fr 1fr 1fr 등으로 지정 할 수도 있다. */ grid-template-columns: 200px 200px 200px; /* 줄의 개수와 너비를 지정한다. 나는 2개로 설정했다. */ grid-template-rows: 200px 200px; } 그리고 하단의 2줄은 4칸을 차지하는 엘리먼트 1개와 각각 1칸씩 차지하는 엘리먼트 2개로 엘리먼트가 총 3개이다. 이 경우 CS..

엘리먼트들을 정렬하는 방식은 float, flex, grid 등이 있다. 내가 배웠던 방식은 float으로 맞추던 방식(only one,,)이었는데 벌써 '옛것'이 되어버렸다고 한다. 실제로 flex를 사용해보니 float을 사용하는 것보다 코드의 양도 적고 한번에 해결할 수 있다는 느낌이다. 훨씬 간단한 flex를 알아보자... ◽ Flex의 속성들 각 박스들은 이고 박스를 둘러싼 엘리먼트는 으로 구성했다. 박스를 둘러싼 엘리먼트인 box-wrap에 display: flex;를 주면 아래와 같이 개발자도구에서 바로 flex와 관련된 속성들을 확인할 수 있기때문에 더욱 쉽게 적용할 수 있다. 1) justify-content - center - flex-start - flex-end - space-bet..

outline width, height 속성에 영향을 주지않고 현재 위치에서 테두리만 생기기 때문에 레이아웃에 영향을 주지 않는다. 테두리 영역을 지정하여 선을 줄 수 없다. border width, height가 늘어나 레이아웃에 영향을 준다. border-box: box-sizing; 속성을 추가하여 박스 안쪽에 생기게 할 수도 있다. 위, 아래, 왼쪽, 오른쪽 각각에 선을 줄 수 있다. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

📄 _mixins.scss ◽ clear: both; @mixin clearfix() { &::after { content: ''; display: block; clear: both; } } ◽ 말줄임 @mixin Nellipsis ($lines: null) { @if ($lines == null) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @else { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; } } ◽ 줄바꿈 속성 @mixi..

이전 필드에서 reset.css를 본 적이 있는데, 파일을 열어보지도 않고 'reset 기능과 관련된 css인가...?' 생각했었다. 나중에 퍼블리셔분이 필요한 파일이라고 말씀하시기에 배포할 때 빼먹지않는 정도로만 인지했었는데.. 만약 이 css가 왜 필요했는지 그 때 찾아보고 알았더라면 토이프로젝트를 할 때 css 관련하여 고생이 덜 했을거라는 생각이 든다. reset.css는 브라우저마다 기본스타일이 다르기때문에 브라우저끼리 동일한 스타일을 주기 위해 css를 초기화하는 환경설정용 css라고 한다. 브라우저마다 여백도 다르고 초기값도 달라서 항상 불편하다는 생각만 했지 방법을 찾을 생각을 못 한 나 자신... 반성 중..🙃 작성한 곳 마다 다르게 작성되어 있고 정해진 표준은 없는 것 같다. 적절히 원..

◽ 다단 편집(Multiple Colume)이란? float이나 position을 사용하지 않고도 다단을 편집할 수 있다. ◽ 종류 colume-count: 3; // 박스의 내용을 3단로 colume-gap: 20px; // 각 단 사이의 간격 설정 colume-rule: 2px dotted brown; // 단 사이의 구분선과 타입 설정 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ background-origin 배경 이미지의 한계를 정하는 것이다. background-origin: border-box; // 박스의 테두리를 포함한 부분까지 background-origin: padding-box; // 박스의 안 여백을 포함한 부분까지 background-origin: content-box; // 박스의 안 여백을 제외한 부분까지 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ background-size background-size: 80px 60px; // 가로 크기 80px, 세로 크기 60px background-size: 80px; // 가로 크기와 세로 크키 모두 150px background-size: container; // 박스의 세로 크기에 맞춤 background-size: cover; // 박스의 가로 크기에 맞춤 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 조건 주석문 IE 브라우저에서만 다른 CSS 파일을 적용하고자 할 때 쓰는 일종의 문법적인 구문이다. 아래와 같이 사용할 수 있다. 💡 왜 이렇게 사용할까? 크롬에서는 svg 포맷의 이미지는 확대를 하더라도 깨끗하게 나타나지만 IE에서 svg 이미지는 보이지 않아 gif나 jpg로 바꿔주어야 한다. 그리고 IE6과 IE7에서 체크박스의 여백이 서로 다르게 나타나기도 한다. 이처럼 달리 적용해야하는 조건들이 있을 때 이렇게 조건 주석문을 사용하여 CSS를 가져온다. 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 내부 스타일시트 ◽ 외부 스타일시트: ◽ 외부 스타일시트: @import ◽ 인라인 스타일시트 예제 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.