emayom.log

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

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은 가변 폰트로 자식의 폰트 ..

우연히 버튼 인터랙션 디자인을 보다가 클릭했을 때 지정한 시간동안 색이 변하게 설정해보고싶었다! 1. 결과 : 다른 버튼이 클릭되었을 때 중복되어 색이 변하는 이벤트가 발생하는 문제가 생겼다 ㅠㅠ 처음에는 자바스크립트로 버튼 클릭 이벤트가 있을 때 이벤트 타겟에 classList.add()로 클래스를 추가하고, 미리 CSS에 해당 클래스의 스타일 요소를 시트의 마지막에 설정해둔 뒤 추가되었을 때 나타나게 해주었다. 그리고 setTimeout을 지정해 시간이 지나면 클래스가 삭제되도록 실행해봤다. 2. 결과 : ㅠㅠ 시간차가 있어도 같은 버튼을 클릭하면 다른 버튼을 클릭하기 전까지 색이 변하지 않는다,, 클릭한 하나의 버튼만 배경색을 변경하고 싶었기 때문에 ..! 시간이 지나면 서서히 원래의 배경색으로 돌..

콘텐츠 내부에 글을 작성하다 보면 줄 바꿈이 되면서 단어가 끊어져 매끄럽지 못하게 느껴질 때가 있다! 그럴 때 사용할 수 있는 줄바꿈 속성에 대해 알아보자. 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의 차이점을 그림으로 쉽게 설명해준다. 뭐가 뭔지 헷갈린다면 한번 보는 것을 추..

이전에 태그의 유형과 속성에 대해 알아봤다. 오늘은 text 타입, password 타입, submit 타입으로 간단한 로그인 폼을 만들어 보자. LOGIN TO YOUR ACCOUNT LoginForm.emayom.repl.co 'Login Form'으로 구글링을 해보면 다양한 시안을 찾아볼 수 있다! input의 요소들을 비운 채 제출할 수 없도록 하는 것 => required / HTML 자동으로 포커스를 알려주는 것 => autofocus / HTML 포커스가 될 경우에 입력하는 부분은 진하게 표시하는 것 => input:focus / CSS submit 버튼에 마우스를 올리면 색이 진해지는 것 => input:hover / CSS 태그의 하이퍼링크 밑줄 ,,,, 싫어 ,,,, (대신에 커서 바꿔..

기술면접 준비를 조금씩 해보려고 찾아보다가 🤔 질문과 답변이 잘 정리되어있는 사이트를 발견했다. 바로 'Front End Interview Handbook' !! 오늘부터 1일 1질문 미션이다. 👇🏼 HTML Questions | Front End Interview Handbook Answers to Front-end Job Interview Questions - HTML Questions. Pull requests for suggestions and corrections are welcome! frontendinterviewhandbook.com 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받..

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