emayom.log

CSS 적용을 위해 다양한 선택자를 이용한다! 오늘은 class 선택자와 id 선택자의 차이에 대해 알아보자. class 선택자와 id 선택자 html에서 클래스, 아이디 선택자 적용 👇🏻 css에서 클래스, 아이디 선택자 사용 👇🏻 .클래스명 { /* 스타일 */ } #아이디명 { /* 스타일 */ } 클래스 선택자의 경우 복수의 요소들에게 스타일을 적용할 경우 사용하고, 아이디 선택자의 경우 유일한 요소에게 스타일을 적용할 경우 사용하게 된다는 차이점이 있다. 예를 들어, .class 에는 베이지색 바닥을 #student는 모두 백그라운드 이미지로 학생의 책상을 넣어보장! .class { display: grid; grid-template-rows: repeat(3, 1fr); grid-templat..

✏️ 오늘은 반응형에 필수적인 미디어 쿼리의 문법과 사용법에 대해 알아보자. 미디어 쿼리(Media Queries) ? 우선 미디어 쿼리란 무엇일까. 🤔 미디어 쿼리는 반응형 웹 디자인의 핵심적인 부분으로 디바이스의 유형이나 특성, 수치에 따라 화면을 다르게 표현하여 대응할 수 있도록 만들어준다. 과거와 달리 현재 정말 다양한 기기로 웹을 사용하기 때문에 일관된 UX를 위해서는 빼놓을 수 없다. 🙋🏻❓ 미디어 쿼리에서 쿼리(Query)란 직역하면 '질의'이라는 의미로 CSS 설정을 위해 우선 조건문에 해당하는지 질의하는 것이라고 생각하면 쉽다. 재미있게 예를 들어보자. 디바이스의 수치에 해당하는 뷰포트의 너비에 따라 CSS 설정을 다르게 해보고 싶다면? 🙋🏻 : 너는 뷰포트의 너비가 얼마야? 1번 스마트..

CSS에서 font-size를 지정할 때 pt, px, em, rem, vw, vh, vmax, vmin 등 다양한 단위들을 이용할 수 있다. 오늘은 그중 em과 rem의 차이에 대해 알아보자. 우선 em과 rem은 모두 가변 폰트이다. 그렇다면 em, rem만 사용하면 자동적으로 브라우저의 크기에 따라 가변 하는 것 일까? 일단 단독적으로는 아니라는 것을 먼저 알고 시작하자! (왜인지는 포스팅 마지막으로,,,!) em ? em은 타이포그래피의 단위 중 하나로 과거 활자를 통해 폰트를 제작할 때 대문자 M을 1em의 기준으로 삼았다는 것에서 비롯되었는데 1em 은 현재 사용되는 12pt 크기의 대문자 M의 너비를 기준으로 정해진다. (여기서 12pt는 16px과 같다.) em은 가변 폰트로 자식의 폰트 ..

오늘은 CSS position 속성에 대해 알아보자. 👇🏻 position 속성 한눈에 보기 static relative absolute fixed sticky position은 태그 요소의 '위치'를 정의하기 위해 사용한다! 앞서 잠깐 살펴본 것과 같이 position 속성에는 static, relative, absolute, fixed, sticky 이 있다. 예제를 통해 쉽게 확인해보기 위해 컨테이너에 담긴 아이템들을 준비했다. (아래의 그림들은 편의성을 위해 임의로 중앙 정렬을 해두었다!) 1. position : static static 은 우리가 포지션 속성을을 지정하지 않아도 적용되어있는 디폴트 값이다. position: static을 적용하기 전과 후가 차이가 없는 것을 확인해볼 수 있다...

콘텐츠 내부에 글을 작성하다 보면 줄 바꿈이 되면서 단어가 끊어져 매끄럽지 못하게 느껴질 때가 있다! 그럴 때 사용할 수 있는 줄바꿈 속성에 대해 알아보자. word-break ? word-break는 텍스트가 콘텐츠 박스 밖으로 넘어갈 때 줄 바꿈의 기준을 단어냐 글자냐로 설정할 수 있다. normal : 기본 줄 바꿈 규칙 break-all : 오버플로우를 방지하기 위해 '글자'를 기준으로 줄 바꿈 keep-all : 한중일 텍스트에서는 '단어'를 기준으로 줄 바꿈 아래의 예시를 보면, 한중일 텍스트는 keep-all으로 지정할 경우 줄 바꿈 시 단어를 끊지 않는다. 영어 텍스는 keep-all 뿐만 아니라 normal 경우도 줄 바꿈 시 단어를 끊지 않는다. word-break - CSS: Casc..

최근에는 다양한 소셜 연동 기능을 통한 간편 로그인 폼을 많이 볼 수 있다. 그때 사용하는 버튼을 모양만 CSS로 간단하게 만들어보자! 아래의 애플 공식 사이트를 참고하면 크기나 높이 등 제작 시 참고해야 하는 인터페이스 제약 사항들을 확인할 수 있다. 👍🏻 Buttons - Sign in with Apple - Human Interface Guidelines - Apple Developer Buttons Apple provides several Sign in with Apple buttons you can use to let people set up an account and sign in. If necessary, you can create a custom button to offer Sign in ..

처음 리셋을 하지 않은 상태에서 스타일을 적용했을 때 생각과는 조금은 다르게 적용이 되었다. 뭔가 시작점이 (0,0)이 아닌 느낌! 오늘은 우리가 CSS의 디폴트 값을 초기화, 무효화할 때 유용하게 사용할 수 있는 사이트를 몇 가지 적어보려고 한다. 왜 사용할까? #크로스브라우징 우리가 적용한 그대로 반영되지않는 이유는 브라우저마다 기본 값으로 설정된 여백, 들여 쓰기 등의 값이 존재하기 때문이다! 즉, 같은 스타일 요소라도 브라우저에 따라서 조금씩 다르게 보일 수 있다는 이야기이다. 그래서 다른 브라우저를 사용하더라도 동일하게 보이도록 초기화나 재설정 과정을 거치는 것이다. 아래는 CSS Reset과 CSS Normalize의 차이점을 그림으로 쉽게 설명해준다. 뭐가 뭔지 헷갈린다면 한번 보는 것을 추..

오늘은 어제 나눠서 만들어 본 발가락 담군 그리드를 수정하려고 한다. 우선 아래와 같은 배경 그리드를 만들고, 어제와 비슷한 가로 그리드 아이템들을 위에 배치해보자! 컨테이너(Container)의 사이즈는 1200px, 거터(Gutter)는 8px, 8단(Column의 그리드 글로는 헷갈릴 수 있으니 완성된 모습을 먼저 확인해보자! 8 Column Grid 8-column-grid.emayom.repl.co 큰 구조를 먼저 잡아보자. ① 컬럼과 거터를 보여주기 위한 배경 그리드를 바닥에 깔고 ② 그 위에 아이템들을 보여주기 위해 전체 컨테이너로 우선 묶어주고 시작했다! (이유는 뒷 부분에 가면 알게된다 🤔) 우선 ① 부터 해결하자. 8개의 칼럼과 거터를 보여줄 배경 그리드를 제작하기위해 col_conta..

개인적으로 Grid가 익숙하지 않다 보니 자꾸 사용하지 않게 되길래 오늘 아아주 기초적인 그리드로 발을 담가보려 한다....ㅎㅎㅎㅎㅎ 극극극초급용이다! 😎 🏖 CSS GRID LAYOUT grid.emayom.repl.co 우선 따로 reset.css 파일을 @import해 기본 값들을 초기화해주었다. CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this ..

FLEXBOX FROGGY, GRID GARDEN, FLEXBOX DEFENSE 🐸👇🏻 FLEXBOX_FROGGY 구글링 중에 우연히 발견하게 된 CSS 게임! display: flex 의 속성들은 이게 저거인가? 저게 이거였던가? 아직 헷갈린다 🙄 1 ~ 24단계로 이뤄진 게임으로 flex의 속성들을 차근차근 실행해보며 쉽고 재미있게 익힐 수 있다. 글로만 보는 것 보다 이렇게 눈으로 보면서 익히는 것도 가끔 머리 식히기에 좋은 것 같다. 속성들의 결과를 시각적이로 확인할 수 있는게 참 좋은 것 같다. 가끔 헷갈릴 때 한 번씩 해줘도 좋을 것 같아서 포스팅해본다! 💣👇🏻 FLEXBOX_DEFENSE 대포의 위치를 Flex 속성으로 이동해서 길을 따라 쳐들어오는 적들을 막는 게임이다. 대포는 180도 정..