개발 LOG

우선 저번과 마찬가지로 HTML과 CSS를 연습하기 위해 카피해 볼 웹페이지를 찾는다.  오늘 따라해볼 문서는 테마웨건에 있는 Feane – Free Bootstrap 4 HTML5 Restaurant Template 으로 이 페이지의 네비게이션 레이아웃만 카피해볼 생각이다.   첫째로 상단의 네비게이션 영역을 파악하기 위해 페이지를 캡쳐하여 pdf화 시킨다. 이런 과정을 박싱이라고 한다더라... 대략 눈으로만 보고 가늠을 하자면 이런식으로 영역을 나눌 수 있는데 사실 아래 햄버거 사진이 있는 부분은 네비게이션 영역은 아니므로 구현하지 않아도 되지만 사실 심심해서 구현하긴 해버렸다...     박싱 과정이 끝났다면 draw.io 등의 웹사이트를 통해 웹구조를 시각화하는 과정을 거쳐야 한다. 이번에는 네비..

HTML과 CSS 태그 정리가 끝났으니 이제 남은건 연습 뿐이며 적절한 연습을 위해서는 몇 가지 준비물이 필요하다!  ThemeWagonhttps://themewagon.com *Live preview는 해당 웹문서 탬플릿이 어떻게 브라우저에서 보일 지 미리 볼 수 있는 기능이다. 그림 실력을 향상시키기위해 모작을 하고 음악을 커버하듯 웹디자인 또한 다른 웹페이지를 따라해보면 실력을 늘릴 수 있는데 테마 웨건은 웹페이지의 탬플릿을 무료로 (또는 유료) 가져와 쓸 수 있도록 해주는 사이트로 적절한 디자인이 필요하다면 이곳에서 가져와 쓸 수 있을 뿐더러 해당 탬플릿들을 가지고 어떤 태그와 요소들이 사용되었는지 구석구석 둘러볼 수 있다.   1400개가 넘는 무료 탬플릿을 제공하고 있으니 이를 이용하여 다양한..

지금까지 제작했던 웹페이지는 반응형으로 설계되지 않아, 특정 디스플레이에서만 제대로 보이는 한계가 있었다. 예를 들어, 16:9 비율의 FHD(1920x1080) 디스플레이를 기준으로 만든 웹페이지는 4:3이나 21:9 비율의 화면, 혹은 QHD, UHD, HD 등의 다른 해상도를 가진 디스플레이에서는 의도와 다르게 표시될 수 있다. 이러한 문제를 해결하기 위해서는 해상도나 화면 비율에 맞춰 크기를 자동으로 조절하는 반응형 웹 제작이 필수적이다!! 메타태그 문서에 대한 메타 데이터를 정의하는 태그로 보통 문자 인코딩, 페이지 설명, 키워드, 뷰포트 설정을위해 사용하는데 항상 문서의 head 부분에 들어간다는 특징이 있다. charset HTML문서의 문자 인코딩을 지정하는데 아마 기본적으로 인코딩 지정을..

그라디언트 그라디언트 - 점진적으로 색의 변화를 나타낼 수 있는 요소로 HTML 요소의 배경을 설정 할 수 있는 background 계열 CSS요소다.gradient 요소가 가질 수 있는 속성으로는 방향, 색상, 정지점 설정 등이 있다. 방향을 나타내는 속성 - 선형 그라디언트 : to top, to bottom 등 - 방사형 그라디언트 : circle at center, ellipse at top left 등 색상을 설정하는 속성- rgb 또는 rgba 로 설정 정지점을 설정하는 속성- radial-gradient (red 30%, blue 70%); radial-gradient: 방사형 그라디언트로 특정 축의 중심을 기준으로 바깥으로 색이 퍼져나가는 방식으로 표현된다..radial { displ..

Background와 Transition  Background- HTML 요소에 이미지나 색상 등을 넣는 속성으로 배경화면을 만드는데 주로 사용한다 background-color - background-color는 요소의 배경 색상을 설정하는 속성이다.- 색상은 일반적으로 색 이름, RGB, HEX 코드 등으로 지정할 수 있다.  background-image - background-image는 요소의 배경으로 이미지를 설정하는 속성이다.- 이미지 경로를 URL로 지정하여 사용한다.   background-position - background-position은 배경 이미지가 요소 내에서 어디에 위치할지 설정하는 속성이다.- 값은 left, center, right 또는 top, center, botto..