반응형 웹 디자인responsive web design PC, 스마트폰, 태블릿 PC, 스마트 TV 등 다양한 화면 크기에 맞게 웹 요소를 재배치하고 표시 방법을 바꿔 웹 사이트를 구현하는 방법. 모바일에서 웹 사이트를 PC버전으로 접속했을 때 모든 내용이 작게 보이는 이유 ∵ PC 화면에서의 픽셀 ≠ 모바일 화면에서의 픽셀 → *뷰포트viewport를 지정하면 접속한 기기의 화면에 맞게 확대/축소해서 표시할 수 있다. * 뷰포트(viewport) : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하는 방법 위처럼 안녕하세요? ↓ PC의 브라우저뿐만 아니라 스마트폰, 태블릿 PC 등등 기기들도 다양하고 그 화면의 크기 또한 천차만별이다. 하지만 각각의 기기에서 어떻게 보일까 테스트하기 위해서 모..

11. 가상 요소 앞에서 학습한 가상 클래스와 용어가 헷갈릴 수는 있다. 가상 요소 또한 '~에 한하여'와 같이 스타일을 적용하는 데 제한을 거는 방식이기 때문이다. 하지만 가상 요소는 선택된 요소에서도 특정 부분만을 선택하기 때문에 가상 클래스와는 엄연히 다른 개념이다. MDN 홈페이지에서 가상 요소로 쓰일 수 있는 목록들이 나타나 있는데, 그 목록 중에서도 플라스크 아이콘이 뒤에 붙어있는 것들이 있었다. (시험용을 뜻한다. 일종의 베타 테스트 중인 가상 요소이니 실제 개발 코드로 아직 사용하지 말라는 뜻이라고 한다.) ▼ MDN에 나열된 가상 요소 목록 (취소선 그어진 것이 시험용) ::after ::cue-region ::grammar-error ::selection ::backdrop ::firs..

07. 인접 선택자 & 직계 자손 선택자 두 선택자는 꼭 알아둬야하지만 앞에서 배운 요소 선택자, ID 선택자, 클래스 선택자보다는 자주 쓰이진 않는다. 인접 선택자( = 결합자) 두 선택자 사이에 '+' 기호를 써서 표기하는데, h1 + p { color: red; } 처럼 쓴다면, h1 바로 다음에 오는 p를 선택하라는 의미이다. (실제로 선택되는 것은 + 뒤에 나오는 선택자인 것!) 그리고 +로 연결된 두 선택자 간의 관계는 '부모-자식'관계가 아니라 '형제'관계이다. 직계 자손 선택자 두 선택자 사이에 '>' 기호를 써서 표기한다. 인접 선택자에서 '형제' 관계였던 것과 달리 '부모-자식' 관계이다. div > nav { color: white; } 위와 같이 쓰면 의 바로 안에 쓰인 에 그 스타..

사실 이 내용은 인강에서 다룬 부분은 아니다. 내가 HTML, CSS를 공부하면서 익숙해져있던 VSCode로 Java를 쓸 수 없을까 알아보다가, 지난번 포스팅에서 VSCode에서 Java를 사용할 수 있게끔 환경 구축하는 방법을 다뤄놓았다. 이후 강의를 정말 가볍게만 들어보자는 마음으로 듣기 시작했는데, 갈수록 "이 부분은 나중에 배우게 되면 알게 될 거예요"라며 너무 익숙하게 쓰시는 강사님.. 그리고 그게 도대체 무슨 말인지 모르겠는 나... 정말 못알아먹어도 한번 다 들어보면 이해가 되긴 하는걸까....ㅠㅠㅠ 강의는 전부 Eclipse IDE를 기반으로 이루어지고 있다. HTML, CSS를 처음 공부하기 시작할 때는 책으로 공부하기 시작을 했어서 그런지 몰라도 코드 첫 부분에 늘 나오는 이건 뭐고,..

transition과 animation을 다루었던 이번 단원 마무리 문제 2가지. 문제 1. 책에서 제공된 코드를 따라 써보는데 반복되는 부분이 있길래 예전에(?) Udemy 강의에서 배운 Emmet을 활용해봤다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 ↓ 문제에서 제시된 위의 코드에 ① 트랜지션 진행 시간을 0.5초로 지정. ② 트랜지션 대상은 all로 지정. (default값이니 안 써도 OK.) ③ 트랜지션 함수는 ease-in으로 지정. 을 적용하는 것이 미션이다. ↓ 영상이 너무 짧아서 사실 위의 제시된 문제와 큰 차이를 못 느끼겠다🤣 문제 2. ↓ 위의 코드에 ① Y축을 기준으로 360° 회전. ② 입체감이 느껴지도록 perspective 속성 200px로 지정. ③ 변형 함수 rotate..

CSS 애니메이션 사용하면 자바스크립트를 사용하지 않고도 요소에 애니메이션을 추가할 수 있다..!!! animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만든다. 그렇게 스타일이 바뀌는 바로 그 지점이 keyframe키프레임이다. ▼ animation 관련 속성 요약 종류 설명 @keyframes 애니메이션이 바뀌는 지점 지정. animation-name 복수의 애니메이션을 구별하기 위한 이름 설정. animation-duration 애니메이션의 실행 시간 지정. animation-delay 애니메이션의 시작 시간 지연을 지정. animation-direction 애니메이션이 끝난 다음, 다시 실행할 때 처음과 같은 방향으로 시작할지, 역방향으로 시작할지 지정. animation-ite..