전체 글

TIL 16 :: css할 때 고려해야할 것

CSS 설계 기법 HTML은 최대한 단순한 구조를 짜는게 좋듯이 CSS도 코드의 중복이 없도록 모듈화를 시키는것이 유용하다. 그래서 같은 button들이라면 .btn .btn1 이렇게 만들어 .btn에는 공통적인 속성을 주고 .btn1에는 각 버튼별 속성을 추가해주는식으로 한다. OOCSS (Object Oriented CSS)가 앞서 설명한 방식으로 레고처럼 버튼, 글자, 내용 부분들을 모듈화 해놓고 조합하는 방법론이다. 모듈화의 장점은 홈페이지를 제작할 때 공통속성을 한번의 작업만 하면 된다는 것이다. 굳이 각각 작업해서 맞추는게 아니라 같은걸 사용한다면 수정이나 시간절약에 좋을것이다. 그리고 css에서 동일한 이름을 정하기도 하는데 이건 회사마다 다르다고한다. 아래 사진은 참고용으로 좋다. 더보기 ..

그리드

Grid란? 행과 열로 된 2차원 레이아웃 시스템으로 엑셀이나 과 비슷하다고 생각하면 쉽다. 행 - row - height 열 - column - width Flex는 비교적 단순한 1차원 레이아웃을 위하기 때문에, 더 복잡한 레이아웃을 사용해야 할 때 Grid가 유용할 것이다. gridBlock 특성의 Grid Container를 정의 inline-gridInline 특성의 Grid Container를 정의 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분됩니다. 그리드 컨테이너 : 그리드의 가장 바깥 영역 그리드 아이템 : 그리드 컨테이너의 자식 요소들 그리드 트랙 : 그리드의 행(row) 또는 열(column) 그리드 셀 : 그리드의 한 칸 (개념적인 정의) 그리드 라인 ..

TIL 15 :: 나르시시즘 테스트 만들어보기

카카오 같이가치를 참고하여 제작되었습니다. 이미지 출처 : flaticon, unsplash

TIL 14 :: [CSS] Flex

flex 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합으로 정말 정렬할 때 유용한 속성이다. float보다 사용하기 편해서 자주 사용했고 아래 이미지처럼 헤더 부분의 공백을 두고 양 끝에 콘텐츠들을 배치할 때 유용하다. 헤더 영역안에 크게 두 영역으로 나누어 배치할 수도 있고 그 안에 또 flex를 사용해 배치할 수 도 있다. 개발자 도구 - styles에서 GUI 방식으로 선택하면서 플렉스 값을 바꾸며 해볼 수 있다. 가장 유용한 가운데 정렬할 때 flex와 같이 쓰이는 두 가지 이건 무조건 냅다 외워버려야한다. display: flex; justify-content: center; align-it..

TIL 13 :: CSS 속성 선택자 + CSS Diner

이전에 가상클래스와 가상요소의 종류에 대해서만 짧게 포스팅 했었는데 오늘은 자주 쓰이는것과 관련된것들에 대해 정리해보았다. 이전 포스팅(가상클래스? 가상요소?)를 보려면 여기로👈 속성 선택자란? 태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근하는 선택자이다. 속성 선택자 종류 작성법 의미 태그[속성이름] 속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다. 태그[속성이름="변수"] 속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다. 태그[속성*="변수"] 속성 의 속성값이 변수 를 포함하는 태그를 선택합니다. (문자열) 태그[속성^="변수"] 속성 의 속성값이 변수 로 시작하는 태그를 선택합니다. 태그[속성$="변수"] 속성 의 속성값이 변수 로 끝나는 요소를 선택합니다. 태그[속..

TIL 12:: 실습과 코드리뷰

주어진 피그마에 맞게 만들어보는 것이었다. 이전에 수업 첫날 혼자 만들어서 포스팅 했었는데 3주동안 수업 들은 내용을 기준으로 새로 만들어서 코드리뷰를 받아봤다. 내 코드 하나하나를 보여준다는게 굉장히 민망하긴 했는데 HTML,CSS에 있어서 기존 방법이 웹표준에 적합한지 야매(?)로 하고있는게 아닌지 마음 한 켠에 걱정이 있어서 잘 하고있는가에 대한 검사 차원에서 코드리뷰를 받았다. 내 코드 리뷰 👍 Good! 1. html, css validator 통과했다. -> 기본적인 것 2. 해당 영역을 article로 지정했다. -> 어디에 가도 독립적이게 사용될테니 article이 적합하다. 3. a태그로 padding을 주어 버튼 모양을 만들었다. -> 수정이 있을 때 유연하다. padding값을 주어 ..

[CSS] IR(Image Replacement) 기법, .blind & .screen_out

IR(Image Replacement) 기법 이미지를 볼 수 없는 사용자를 고려하여 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다. 모든 곳이 동일하게 했으면 좋겠지만 여러 방법이 있는 이유는 브라우저도 다양하고 스크린리더 종류마다 다르기때문인것같다. 네이버와 다음 두 사이트에서 IR 기법을 어떻게 처리하는지 비교해보았다. 1. 다음 .screen_out { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } -> width나 height이 0으로 되면 안 읽는 경우가 있다. SEO를 위한거지 스크린 리더를 위한..

TIL 11 :: fixed vs sticky

TIL 10 :: Notion으로 이력서 만들어보기

해봄님의 노션특강을 듣게 되었는데 이때까지 내가 알던 노션은 노션이 아니었다(?) 특강 듣는 내내 '난 이때까지 뭘 써온거지? 이렇게 다양한 노션을 고작 메모장으로만 썼다니!!!' 하면서 감탄했었다. 1️⃣ Notion이란? 노션이전에는 코드에디터들을 개발하다가 노코드툴을 만들어 개발자를 타겟으로 하지 않고 오히려 개발 생태계에 영향력을 행사하게 되었다. Q. 노션이 잘 된 이유는? A. 쉽다! 있어빌리티! 커뮤니티! 이 3개 때문이다. (saas) 2️⃣ Notion의 구조 워크 스페이스 > 섹션 > 페이지 > 블록 워크 스페이스, 섹션 : 노션 admin에서 관리하는 파트 ( 딥하게 파고들고싶을때 알아볼것) 페이지 : 종이 → 디렉토리 → 폴더 → 탐색기(Finder) 블록 : 페이지 안의 모든 것 ..

Til :: overflow:hidden 🆚 display:none

overflow:hidden 🆚 display:none 두 태그 다 사용해본적이 있는데 요소들을 보이지 않기 위해 사용했지만 그 차이에 대해 깊게 알아본적이 없어 이번에 알아보고자 한다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem eligendi ipsam unde minus quae quod maiores quas in enim quos animi totam provident quisquam doloremque, sunt sed, vitae amet consequatur! 이렇게 영역과 콘텐츠가 있을때 영역 바깥으로 글자가 나온것을 확인할 수 있다. overflow 정해진 블록보다 그 안의 콘텐츠가 더 클 때 지정하는 처리법이다. 적용 ..