본문 바로가기
반응형

CSS15

구글 클론 코딩 Preface 이번엔 구글 홈페이지를 만들어봤다. 워낙 화면 구성이 간단해서 쉽게 만들 수 있을 것 같다고 생각했었는데, 막상 교재 없이 모든 웹 요소를 하나하나 제작하다보니 시간이 꽤 오래 걸렸다. 전체적인 레이아웃을 구성하고 색상을 입히는 등 HTML과 관련된 간단한 CSS 작업은 막힘없이 진행할 수 있었는데, 자바스크립트를 사용해 숨겨놓았던 하위 메뉴를 표시하는 작업은 따로 책을 찾아보며 고민할 시간이 필요했다. 아, 그리고 이번 작업은 모든 웹 요소를 픽셀 단위로 제작했는데, 웹 페이지의 크기를 조절할 때마다 메인 로고와 검색 창의 위치가 바뀌는 것이 너무 신경쓰인다. 개강 전에 시간이 되면 그리드 레이아웃, 플렉스박스 레이아웃을 사용해 반응형 웹 페이지를 만들어보려고 한다. 이번엔 하위 메뉴를 .. 2022. 8. 19.
제주 여행사 웹 사이트 Preface HTML + CSS + JavaScript 책의 마지막 부분에 있는 웹 사이트 만들기 프로젝트를 진행하는 과정을 업로드한다. 한 번에 전부 완성하려 했지만, 이틀에 걸쳐 완성해야 할 것 같다. 다른 웹 사이트를 클론 코딩하기 전 연습한다는 생각으로 필요한 부분을 임의로 수정하며 책에 있는 코드를 따라 적고 있다. 처음엔 간단한 웹 사이트를 만드는 것 정도는 쉽게 할 수 있을 것이라 생각했는데, 예상했던 것 보다 신경 쓸 부분이 많다. 무엇보다 처음 큰 틀을 제대로 잡는 것이 정말 중요한 것 같다. 자세한 내용은 코드를 전부 완성한 후 이번 글에 추가하겠다. 모든 코드를 완성했다. 웹 사이트에 링크를 따로 연결한 것도 아니고 기본적인 형태만 만든 것 뿐인데, 시간이 꽤 오래 걸렸다. 그래도 .. 2022. 8. 12.
[CSS] 반응형 웹과 미디어 쿼리 Preface 이번 장에선 반응형 웹을 만드는 방법을 공부했다. 내용이 워낙 많아 공부할 때도, 블로그를 작성할 때도 시간이 오래 걸렸지만, 내용 자체는 한 번 읽어보면 충분히 이해할 수 있는 내용들이라 어렵지 않게 진도를 나갈 수 있었다. 이번 장을 마지막으로 책에 있는 CSS의 모든 내용을 끝냈는데, 후반부의 내용들은 아직 익숙치 않아 CSS를 사용하여 막힘 없이 원하는 웹 페이지를 제작하려면 시간이 조금 걸릴 것 같다. 주변에서 웹 공부가 프로그래밍 언어나 DB 공부보다 훨씬 재밌다는 이야기를 많이 들었는데, 나는 잘 모르겠다. 확실히 난이도 자체가 쉽긴 하지만, 난 아무래도 백엔드 영역 공부가 훨씬 흥미롭고 재미있는 것 같다. 1. 반응형 웹 알아보기 - 반응형 웹 디자인: 웹 요소를 화면 크기에.. 2022. 8. 3.
전자기기의 스크린 정보(미디어 쿼리 구문) 최근에 출시된 전자기기의 화면 크기, 뷰 포트 크기, 해상도 등 미디어 쿼리에 필요한 정보를 제공하는 사이트 https://yesviz.com/devices.php Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz A Useful database contains Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular devices including phones, tablets, smart watches and laptops. yesviz.com 2022. 8. 1.
[CSS] 트랜지션과 애니메이션 Preface 이번 장에선 코드에 변형과 트랜지션, 애니메이션을 적용해 특정 효과가 있는 웹 요소를 정의하는 방법을 공부했다. 이전 내용들에 비해 다소 복잡한 내용들이 많았고, 특히 마우스 오버를 하면 상품 정보를 표시하는 코드가 어려웠다. CSS의 기본적인 내용은 대부분 익혔다고 생각했는데, 책에서 다루지 않은 부분들이 아직 많다는 것을 새삼 느낄 수 있었다. 그러나 어렵고 복잡한 만큼 해당 속성들을 사용하면 웹 요소가 훨씬 고급지고 풍성해져서 보는 맛이 있는 것 같다. 1. 변형 알아보기 - CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다. transform: 함수 - 변형의 종류 1) 2차원 변형: 웹 요소를 평면에서 변형한다. → x축은 오른쪽으로 갈수록.. 2022. 8. 1.
[CSS] CSS 고급 선택자 Preface 이번 장에선 기존의 선택자 외의 다양한 선택자와 가상 클래스를 공부했다. 이런저런 선택자를 사용해보며 CSS는 사용자의 편의를 위한 부분이 제대로 확립되어 있다는 생각을 했다. 그러나 그 종류가 너무 다양해서 모든 선택자를 암기하고 사용하는 것은 사실상 어려울 것 같고, 사용 빈도가 높은 선택자를 제외하곤 필요할 때마다 찾아서 사용하는 것이 맞는 것 같다. 이번 장에서 배운 내용중에 제일 마음에 드는 선택자는 :hover 가상 클래스 선택자이다. 뭐랄까, 마우스 포인터를 가져갔을 때 메뉴의 배경색이 바뀌는 것만으로도 굉장히 세련된 느낌을 주는 것 같다. 1. 연결 선택자 - 연결 선택자: 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. → 그룹 선택자는 둘 이상.. 2022. 7. 30.
[CSS] 이미지와 그라데이션 효과로 배경 꾸미기 Preface 이번 장에선 배경색과 배경 이미지를 지정하는 방법과 그라데이션 효과를 사용하는 방법을 공부했다. 지난 장의 마지막 부분에서 배경 이미지를 사용한 예제를 수정할 때 마음대로 되지 않는 부분이 있었는데, background 속성을 배운 후 다시 보니 쉽게 문제를 해결할 수 있었다. 아, 그리고 같이 공부하는 친구와 블로그 스킨에 대해 이야기하던 도중 며칠 전 공부한 웹 폰트가 생각나 친구의 블로그 헤더 부분의 글씨체를 바꿔줬다. 1. 배경색과 배경 범위 지정하기 - background-color 속성: 배경색을 지정한다. → 상속되지 않는다. - background-clip: 배경색의 적용 범위를 조절한다. 1) border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값) 2.. 2022. 7. 28.
[CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) Preface 이번 장에선 display와 float 속성을 사용하여 원하는 위치에 요소를 나타내는 방법을 공부했다. 유튜브 강의로 이 부분을 봤을 땐 어렵다고 느꼈었는데, 막상 책을 보며 실습하자 크게 어렵진 않았다. 다만, 이번 장의 마지막 부분에 있는 position: absolute 속성을 사용하여 사진 위에 텍스트를 표현하는 예제와 마무리 문제 3번은 조금 헷갈리는 부분이 있었다. 전자는 텍스트의 위치 값이 마음대로 조절되지 않았고, 후자에선 링크 요소인 a의 display 속성을 block으로 지정했는데도 float: left 속성을 통해 모든 요소가 한 줄에 가로로 나타나는 것이 이해 되지 않았다. 내가 공부한 내용에 따르면 블록 요소는 한 줄을 전부 차지하는데, float를 사용하면 이 특.. 2022. 7. 27.
[CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) Preface 이번 장에선 기본적인 박스 모델을 만들어보고, 지난 장에서 언급했던 마진과 패딩에 대해 다시 한 번 자세히 공부했다. 처음 마진과 패딩의 정의를 봤을 땐 솔직히 잘 이해가 되지 않았었는데, 직접 두 속성을 코드에 적용해보며 비교하자 두 개념의 차이점을 확실히 알 수 있었다. 1. CSS와 박스 모델 - 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 1) 해당 요소의 너비가 100%이다. 2) 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - 인라인 레벨 요소: 콘텐츠만큼만 영역을 차지하는 것 1) 나머지 공간에 다른 요소가 올 수 있다. - 박스 모델 요소: 박스 형태인 요소 - 박스 모델의 구성 1) 콘텐츠 영역 2) 패딩 3) 테두리 4) 마진 etc. -.. 2022. 7. 26.
HTML, CSS 태그 및 속성 Preface 헷갈리는 태그나 속성이 있을 때마다 매번 블로그 글이나 책을 찾다 보니 시간이 너무 오래 걸린다. 웹 언어들의 주요 태그나 속성들을 한 눈에 쉽게 보고자 글을 업로드한다. 1. HTML ○ 태그 종류 설명 문서 유형을 지정한다. 웹 문서의 시작과 끝을 나타낸다. 웹 브라우저가 문서를 해석하는 데 필요한 정보를 입력한다. 웹 문서와 관련된 정보를 지정할 때 사용한다. 문서의 제목을 나타낸다. 실제 웹 브라우저에 표시할 내용을 입력한다. 헤더 영역을 의미한다. 같은 웹 문서 안에서 다른 위치로 연결하거나다른 웹 문서로 연결하는 링크를 만든다. 웹 문서에서 핵심이 되는 내용을 넣는다. 웹에서 실제로 보여주고 싶은 내용을 넣는다. 웹 문서에서 콘텐츠 영역을 나타낸다. 사이드 바를 만든다. 웹 문서.. 2022. 7. 26.

티스토리툴바