[스파르타코딩클럽] 웹개발 종합반 - 1주차 (1-8~1-13)

폰트, 주석, 파일분

https://fonts.google.com/?subset=korean

맘에 드는 폰트 한 개 고르기

 

난 Dongle 폰트를을 선택했다.

 

폰트를 적용하기 위해선, 선택한 폰트의 html code를 붙여 넣어준 후, css 코드를 * {} 안에 복사, 붙여 넣기 해주면 글꼴이 적용된다.

 

주석처리를 하는 방법

범위 선택 후 Ctrl + "/" 이다.

언어마다 주석처리 방법이 다르기 때문에 그냥 주석처리를 해주는 단축키를 외워두기 (Ctrl+/) 면 대부분의 언어 주석 처리가 가능하다.

 

또한 긴 style을 파일로 분리하여 가독성을 높이는 방법을 알려주었는데, 

style 내부의 내용을 ~. css 파일로 옮긴 다음

<link rel="stylesheet" type="text/css" href="mystyle.css">

head에 넣어주면 css파일을 불러와 효과를 적용해 준다.

 

또한 display:flex;라는 요소를 사용하여 세로를 기준으로 정렬할 수 있다.

height: 100vh를 통해서 Viewport Height의 100%를 사용한다고 선언할 수 있다.

또한, 완전히 정가운데에 정렬을 하기 위해선 다음과 같이 코드를 사용해줘야 한다.

.container {
  display: flex;
  flex-direction: column; /* Flex 안의 아이템들을 세로 방향으로 배치합니다. */
  justify-content: center; /* 주축 방향으로 가운데 정렬합니다. */
  align-items: center; /* 교차축 방향으로 가운데 정렬합니다. */
  height: 100vh;
  text-align: center;
}

이 코드는 세로축 기준으로 중앙 부분에 문자열을 정렬한다는 의미이다. 이 코드의 결과물로 block의 정 가운데에 내용들이 위치하게 된다.

 

position: fixed는 화면을 드래그해서 이동할 때, 페이지와는 상관없이 위치를 고정시키는 데 사용된다.

웹페이지는 위와 같은 구성을 가지고 있으며, 

내비게이션 바는 홈페이지 상단에 위치하며, 주로 메뉴항목이 포함되어 있다. 이 항목들은 사용자가 웹사이트 내에서 이동하고자 하는 다른 페이지로 연결되어 있습니다.

본문은 홈페이지의 가장 큰 부분으로, 주요 콘텐츠가 포함되는 영영이다. 이곳에는 웹사이트의 내용이 위치하며, 텍스트, 이미지, 동영상 등 다양한 형태의 정보가 포함되어 있다.

푸터는 홈페이지 하단에 위치하는 부분으로, 주로 추가 정보와 사이트에 대한 부가적인 링크를 포함한다. 일반적으로 연락처, 저작권, 이용약관 링크, 개인정보 처리 방침등이 포함되고 있다.

 

하지만 아무리 css 코드를 잘 짜도, 미적 감각과 코딩 감각은 다르기 때문에 bootstrap이라는, 예쁜 css 모음집에 대하여 알아보게 되었다.

현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다. 부트스트랩의 기본적인 원리는 파일분리와 동일하며, 다만 링크가 웹페이지 어딘가에서 css를 불러온다는 점에 있어서 차이가 있다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 

rel은 css파일을 불러오는 것이기에 "stylesheet"를

intergrity 속성은 css파일의 무결성을 지정해 주며,

crossorigin은 css파일을 다른 도메인에서 가져올 때  발생하는 보안 문제를 방지하기 위하여 사용하는 것이라고 한다.

이 정도만 숙지해 두면 될듯하다.

 

과제를 사용하며 주로 사용한 부트스트랩들은 다음과 같다고 한다.

Components

• Cards
• Navbar

Utilities

• Flex
• Spacing
• Text
• Position

Forms

• Input group

등을 부트스트랩에 검색하면 예시를 찾을 수 있고, 그 코드들을 복사/붙여 넣기 하면 간단하게 css 쪽 문제들을 해결할 수 있다.