출처 : 코딩자율학습 HTML + CSS + 자바스크립트
2024년 08월 06일 ~ 12일 동안 도서관에서 빌린 위 도서를 통해 HTML / CSS 복습을 하였다. Js는 문법에 익숙해지면서 프로그래밍을 직접 할수 있을 때까지 반복해야겠다.
우선 이 책은 p600이 넘는데 책으로만으로도 예제 코드를 통해 잘 따라갈수 있게 되어있었고, js와 project 코드는 살짝 chat의 도움으로 이해를 하긴 했지만.. 입문자인 나에게는 꽤나 복습이 잘 되었다.
이 도서를 통해 저자는 다르지만
같은 출판사인 zerocho님 을 알게 됐는데 이분의 js 강의를 한 번 듣고 싶어져서,,, 책을 살까 고민중...
책의 마지막 부분인 project 예시 코드를 통해 간단한 웹 페이지를 제작해보자
헤더 영역 만들기
header.html
헤더영역을 작성하기에는 시맨틱 테그의 header 태그가 가장 적절하다. 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 내비게이션 영역은 nav 태그로 작성하는 것이 가장 적절하다.
내비게이션 영역을 보면 메뉴의 순서는 중요하지 않기 때문에 nav태그안에 ul태그로 작성하였다.
HTML 코드에서 핵심 부분은 container 클래스가 있는 div 태그이다. div태그는 전체 프로젝트의 기준 너비(보통 1140px)를 유지하기 위한 wrapper 역할을 한다.
header.css
웹 브라우저의 기본 값 대신에 우리가 원하는 값으로 CSS를 적용하기 위해 기본 스타일 시트 속성을 위 코드로 초기화를 한다.
chat 해석
모든 요소(*)의 기본 여백(margin)과 패딩(padding)을 0으로 설정합니다.
box-sizing: border-box;는 요소의 너비와 높이를 계산할 때, 패딩과 테두리를 포함하도록 설정합니다.
링크(a 요소)와 방문한 링크(a:visited)의 색상을 부모 요소에서 상속받
도록 설정하고, 기본 밑줄(text-decoration: none)을 제거합니다.
리스트 항목(li)에서 기본 목록 스타일(예: 불릿 포인트)을 제거합니다.
chat 해석
.container 클래스는 너비를 1140픽셀로 고정하고, 좌우 여백(margin: 0 auto;)을 자동으로 설정해 가운데 정렬합니다.
header 요소는 절대 위치(position: absolute;)로 설정되어, 화면 상단(top: 0;)에 고정됩니다.
z-index: 1;로 다른 요소들 위에 나타나도록 설정합니다.
width: 100%;는 헤더가 화면 너비 전체를 차지하도록 하며, padding: 1rem;은 내부 여백을 1rem로 설정합니다.
헤더 내부의 .container 클래스는 플렉스박스(display: flex;)를 사용하여 자식 요소들을 가로로 배치합니다.
justify-content: space-between;으로 자식 요소들이 좌우 끝으로 배치되도록 하고, align-items: center;로 수직 가운데 정렬합니다.
이 컨테이너의 너비는 100%로 설정되어 헤더 전체를 차지합니다.
ul 요소는 플렉스박스(display: flex;)로 설정되어, 리스트 항목(li)들이 가로로 배치됩니다.
각 li 요소(메뉴 항목)에 10픽셀의 패딩을 적용하여 항목 간의 간격을 확보합니다.
header 내의 button 요소들은 투명한 배경(background: transparent;)과 테두리(border: 0;)가 없으며, 커서가 버튼 위에 있을 때 포인터로 변경(cursor: pointer;)됩니다.
h1 요소 내의 버튼은 폰트 크기(font-size: 2rem;)가 2rem로 설정되며, 폰트 두께(font-weight: bold;)는 굵게 설정됩니다.
내비게이션 메뉴(nav ul li)의 버튼은 폰트 크기(font-size: 1.2rem;)가 1.2rem로 설정됩니다.
작업화면
메인 영역 만들기
앞에서 작성한 헤더 영역은 position 속성값을 absolute로 지정했기 때문에 화면에 고정되어 있는 상태이며 다른 요소의 레이아웃에 간섭하지 않는 상태이다.
main.html
메인 영역은 시맨틱 태그인 main 태그로 작성하고 그 안에 기준 너비를 유지하기 위한 container 클래스가 포함된 div 태그가 있다. div 태그안에 여러 태그를 적절하게 사용하자
main.css
linear-gradient() 함수를 사용하면 배경색이 이미지를 덮는 효과를 주며 수직 방향에서 요소들이 중앙에 위치하도록 display 속성값을 flex로 지정한다. 텍스트도 중앙 정렬하기 위해 text-align 속성값을 center로 지정한다.
텍스트별로 크기와 margin 속성 등을 지정한다.
버튼을 꾸미는 코드이다. 보통 버튼은 background-clolor 속성으로 배경색을 투명하게(transparent)로 지정하고 시작하는 편이 좋다.
메인 화면의 글자가 지워졌다가 다시 채워지는 기능을 넣는다. ::after 가상 요소 선택자로 텍스트 마지막에 너비 3px, 40px 크기의 배경색이 투명한 막대(bar)를 만든다.
구글 폰트 적용, font-family:"Varela Round", sans-serif; 코드 h2 추가
섹션 영역 만들기
section. html
섹션 영역은 논리적으로 관련 있는 내용끼리 구분한 영역이므로 section 태그를 사용한다. section 태그는 h2~h6 태그 중에서 하나를 반드시 사용해야한다.
CDN 방식으로 추가한 Font Awesome 라이브러리는 right 클래스 하위에 있는 social 클래스에서 i 태그로 사용한다.
section.css
:nth-child 가상 클래스 선택자를 사용해 짝수 번째 섹션 영역의 배경색을 회색 계열로 설정한다.
본문은 텍스트와 이미지를 왼쪽과 오른쪽으로 나눈다. 이를 about-self 클래스 하위에 left 클래스와 하위에 right 클래스로 구분한다. float 속성으로 레이아웃을 분할하고 각각 너비의 절반씩 차지하도록 하는데 float 속성은 적용 대상의 원래 위치를 보장하지 않기에 먼저 clear 속성으로 float 속성을 해제한다.
섹션 영영 만들기 2. html
섹션 영역 만들기 2. css
배경영역.html & css
background-attachment 속성을 fixed로 지정하면 웹 페이지를 스크롤할 때 이색적인 느김으로 표시된다.
배경역은 아무런 정보를 전하지 않는 단순히 디자인적 요소이므로 h2~h6태그를 사용할 필요가 없다. 그래서 section 태그 대신에 div태그를 사용한다.
섹션 영역 만들기 -PortFolio html & css
portfolio-me 클래스 안에 portfolio-inner 클래스를 가지고 있는 div태그로 하나의 사각형을 그룹 짓고 그 안에 img태그와 strong 태그, h3 태그를 사용해 콘텐츠를 표시한다.
섹션 영영 만들기 - Contact With me html & css
반응형 코드 적용하기
CSS에서 반응형 코드를 적용하려면 미디워 쿼리(media query)를 사용한다. 미디어 쿼리는 해상도를 기준으로 서로 다른 CSS를 적용할 때 사용한다. 따라서 기준이 되는 해상도를 먼저 정한다. container 클래스에 1140px 크기를 지정했으므로 기준 해상도를 1140px로 잡는다.
자바스크립트 적용하기
웹 브라우저에 화면이 표시된 후 동적으로 화면을 조작하려면 자바스크립트를 사용해야 한다. 보통 body 태그 안에 그리고 html & css 코드 다 작성되고 나서 연결하는 듯 하다. (제일 하단)
해당 프로젝트에서는 메인 영역의 텍스트 타이핑 효과, 헤더 영역의 디자인 변경 효과, 스크롤 이동 효과를 적용할 것이다.
js 코드는,,, 하나씩 해석하는게 아직 어려워서 클론코딩처럼 따라하고 학습을 우선 하는것으로,,,
유효성 검증하기
이미지랑 몇 수정하면 포트폴리오 형식으로 사용해도 되지 않을까,,, 어찌어찌 일독 끝!
