오열매의 코딩 공간

반응형 웹(Responsive Web) 사이트 제작에 도움을 주는 요소들이 있다. Grid cell에 관한 파라미터인데, 높이 또는 너비를 상황에 맞게 변화시켜준다. 주로 grid-template-columns / grid-template-rows 를 정의하는 repeat() 함수와 많이 쓰인다. 1) minmax 최소, 최대 길이를 지정한다. 예시와 함께 살펴본다. .container { height: 100vh; display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); grid-template-rows: repeat(3, 100px); gap: 20px; } minmax(100px, 1fr)로 설정했다. 이 뜻은, 각 셀을 100px ..

Flex-box와 마찬가지로, 대부분 부모 태그에서 컨트롤 한다. Flex-box도 매우 유용하지만, Grid가 더 필요한 경우도 있을 수 있다. 많이 사용하는 속성으로만 간단 요약하여 정리한다. 1) grid-template-columns / grid-template-rows 가장 중요한 속성이라고 생각한다. 그리드의 형태를 정의하는 속성 및 방식들이 여러가지 있고, 속성들 또한 다양하지만 기본적으로 이 속성을 사용하여 정의하는 것이 직관적이라고 생각한다. display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px 100px 100px; 각 행과 열에 대해 너비와 높이를 직접 지정해주는 방식이 기본 방식이다. Gr..

Flex-Box의 속성에 대해 아주 간단하게 코드를 통해서만 살펴본다. 속성들이 아주 다양하지만, 실용적인 속성 위주로만 포스팅한다. (전체 속성들을 알고 싶으면 따로 찾아봐야 한다.) 1. Flex-Box 정의) display:flex; 위 코드를 flex를 적용시킬 요소들을 감싸고 있는 부모 태그에 선언한다. 요소들이 main axis를 기준으로 한 라인에 있도록 한다. 2. flex-direction) flex-box는 main-axis와 cross-axis가 있다. flex-direction은 main-axis를 기준으로 설정한다. 위 그림의 굵은 선이 main-axis, 얇은 선이 cross-axis이다. flex-direction: row; 부모 태그에 선언한다. * row (default) ..

요소의 위치를 결정하는 position 속성은 아주 요긴하게 쓰인다. position에는 5가지 속성 값이 있다. static, fixed, relative, absolute, sticky 이다. 실습을 통해 순서대로 살펴본다. 들어가기 전에] 간단한 예제로 각 요소의 기준 및 위치 선정 방식, 속성을 그림으로 파악한다. 1 > 초기 위치 2 > 스크롤을 내린 상태 위 그림들을 기준으로 설명한다. 1) static 초기 요소의 상태. 아무런 설정을 하지 않은 상태이다. (default) 따라서 기준도 따로 없다. 2) fixed 브라우저를 기준으로 요소를 위치시킨다. 페이지의 맨 왼쪽 위의 꼭짓점(top: 0px, left: 0px)을 시작점으로 한다. 또한, 스크롤을 내리더라도 변함 없이 그 자리에 고..

media query는 반응형 페이지를 만들 때 필수 요소이다. 예를 들면, 페이지의 크기에 따라 웹 사이트 내부의 요소들의 크기나 배치가 달라지는 것 등이 있다. 주로 PC, 모바일, 가로모드, 세로모드, 휴대폰 기종 등에 따라 달라지게 한다. 위와 같은 상황에서 미디어 쿼리를 사용하는 것이 실용성이 좋지만, 일단은 기본 사용법에 대해서만 알아본다. 사진 2개를 같이 보면서 봐야 한다. 왼쪽의 html 파일에서, main 태그에 쌓인 부분은 두 번째 사진에서의 가운데에 속한다. 일반적이 글이 보인다. 이를 css 파일에서 media query를 통해 최대와 최소 너비에 대한 조건을 부여했다. max-width: 최대 너비. (최소 너비를 설정하지 않았다면, 0부터 해당 너비까지) ... 예제에서는 80..

간단하게 예제를 통해 핵심만 설명한다. 첫 번째 사진의 코드를 적용시킨 결과가 두 번째 사진이다. html의 body 태그쪽을 보자. 첫 번째 태그는 너비와 높이를 설정하지 않은 block, 두 번째 태그는 너비와 높이를 설정한 block, 세 번째 태그는 너비와 높이를 설정한 inline, 네 번째 태그는 너비와 높이를 설정한 inline에 display:block; 특성까지 설정했다. 결론만 말하자면, inline은 너비와 높이를 가지지 않는다. 아무리 설정해줘도 변경할 수 없다. 너비와 높이는 오직 block만의 특권이다. 따라서, 너비와 높이를 이용하기 위해서는 display:block 이 기본이 되어야 한다. 다행히도 inline 태그는 몇 종류 없다. 아래의 주요 태그들만 알아놓고 나머지는 다..

fCSS-Hack에 관한 코드다. 정석적인 방법은 아니라, 사용자들이 브라우저의 오류를 해결하기 위해 연구해서 공유된 내용임을 미리 알린다. 실제 예시 코드를 이용하여 알아본다. 하나의 컨테이너에 3개의 칼럼이 있는 상황. 원래는 컨테이너에 justify-content: space-between 을 부여하여 배치하려 하는데, 가운데 요소가 화면의 정중앙에서 약간 벗어나는 상황이다. 그래서 아래와 같은 css 코드를 사용한다. 참고로 SCSS를 사용했다. CSS로 사용하려면 상위 태그로부터 따로 분리해내어 독립적으로 선언하고, &의 뜻은 해당 태그라는 뜻이다. 예를 들면, div{ &:hover { ~ } } 는 div:hover{ ~ } 와 같은 뜻이다. 위 코드를 실행하면, 처음에 의도한 space-b..

box-sizing 특성의 실용적인 측면만 포스팅 한다. 간단하게 원래의 특성에 대해 말하자면, box-sizing은 'Box의 크기를 어떤 것을 기준으로 계산할지'에 대한 것이다. content-box : 콘텐트 영역을 기준으로 크기를 정함 border-box : 테두리를 기준으로 크기를 정함 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 defalut는 content-box 이다. 하지만 content-box의 문제점이 있다. 기존의 특정 Box에 Padding 값을 부여한 상태에서 해당 Box 안의 요소에 특정 너비값을 준 경우가 그 예시에 속한다. 실제 실습 예시이다. 원래는 아이콘 4개가 보여야 하는데, 하나가 화면 밖으로 사라졌다. 이미 Padding으로 50p..

말 그대로, 클래스 명명법을 통해 html 태그를 구성하는 방식이다. 빠르게 실제 예시를 통해 살펴본다. 위 사진은 html 태그를 생성할 때, 특정 태그에 속하는 모든 자식 태그들을 상위 태그의 클래스명을 포함하여 명명한 사진이다. (간단하게 이러한 방식을 BEM 이라고 생각하면 된다.) 실용적인 측면만 살펴보자면, 이처럼 클래스명으로 구분하는 것이 나중에 해당 요소에 대한 유지보수가 용이하다. CSS 코드로 보면 직관적으로 어떤 부분에 대한 코드인지도 한 번에 알 수 있다. 참고로, 위 코드는 SCSS를 적용했을 때의 코드 형태이다. 단점은 클래스명을 센스있게 짓기가 까다롭다는 점이다. 이는 코딩 실력과는 무관한 다른 영역인 것 같다. 하다보면 노하우가 생길 것이다. BEM 방식을 SCSS와 결합하여..

구글에서 제공하는 무료 폰트와 아이콘을 이용할 수 있는 사이트를 찾았다. 1) Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크로 접속해서 원하는 폰트를 찾는다. 폰트를 선택하고 들어가서 아래를 살펴보면 Styles 라는 부분이 나온다. 굵기별로 구분되어 있다. 원하는 굵기를 우측의 + 버튼을 눌러서 추가한다. 추가하면 우측에 내가 추가한 내용들에 대한 팁들이 생긴다. 아래의 Use on the web 에서 @import를 누른다. (link를 이용하는 방식보다 깔끔하다.) 태그 안의 내용들과, 아..