멋사 D+4 HTML+CSS

728x90

VSCODE 설정

vscode 설정 수정 (ctrl+,)

font size, terminal fontsize 본인의 환경에 맞게 수정

tab size: 2 (협업을 위해 동일 환경 설정)

mini map: 끔 (화면을 넓게 사용할 수 있음)

self closing 자동 설정

검색창열기(crl+shift+p) -> settings -> 사용자 설정 열기(JSON) -> emmet이 없으면 tabsize밑에 아래 코드 붙여넣기

"emmet.syntaxProfiles": {
    "attr_case": "lower",
    "attr_quotes": "double",
    "html": "xhtml",
    "inline_break": 3,
    "self_closing_tag": "xhtml",
    "tag_case": "lower"
  },

HTML Layout

html 기본 구조 생성

<!DOCTYPE html>
<!-- 언어 설정 -->
<html lang="ko-KR"> <!--en으로 되어있는데 수정해줌-->
<head>
  <!-- 문자 인코딩 방식 -->
  <meta charset="UTF-8" />
  <!-- IE 문서 모드 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- 뷰포트 크기 조절 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  
</body>
</html>

컨텐츠 구조 설계법

논리적인 순서: 콘텐츠는 모든 사람들이 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다.

시맨틱 마크업: 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. (무조건 div를 쓰는게 아니라 적절한 태그(main, article, footer 등)를 뽑아내는 것)

네이밍: id(unique 중복불가 주민번호처럼), class(중복가능 이름처럼)

요즘 트렌드는 class를 사용 But id는 form관련 요소를 삽입할 때 반드시 필요하다.

보통 3/4로 하는데 실습은 맨 오른쪽처럼 5단 구성으로 설계

구조를 짜보면서 어떤 태그를 사용할지 스스로 고민하는 습관이 필요하다.

HTML 자동완성

emmet

tag+class 단축키: 태그이름.클래스이름 쓰고 엔터 누르면 <태그이름 class="클래스이름"></태그> 자동완성된다.

+ 키를 사용해 한번에 생성: header.header+div.visual+main.main+article.slogan+footer.footer

<body>
  <header class="header">헤더</header>
  <div class="visual">비주얼</div>
  <main class="main">메인</main>
  <article class="slogan">슬로건</article>
  <footer class="footer">푸터</footer>
</body>

$* 키를 사용해 한번에 생성: div.group$*3

<div class="group1"></div>
<div class="group2"></div>
<div class="group3"></div>

* 키를 사용해 한번에 생성: div.group*3

      <div class="group"></div>
      <div class="group"></div>
      <div class="group"></div>

네이밍패턴

케밥케이스 div.footer-bg
카멜케이스 div.footerBg
파스칼케이스 div.FooterBg
스네이크케이스 div.footer_bg

부분 전체 복사하는 방법

shft + alt + (방향키 위/아래)

CSS

css 파일 연결은 link까지 입력하면 자동완성되는 기능을 이용하면 편리하다. 상위 디렉토리가 제대로 나와있지 않다면 수정해야함!

<head>
	...
	<link rel="stylesheet" href="./styles/style.css" />
</head>

css 적용

우선순위는 id > class > 요소

header { /* header 태그 모두 적용 */

}

.header { /* class="header" 인 요소 적용 */

}

#header { /* id="header" 인 요소 적용 */
  
}

CSS 실습

오른쪽 body에 이탤릭체로 들어가있는 것은 사용자가 설정한 것이 아닌 기본 설정!

body { margin:0;} 을 주면, margin이 사라지면서 화면이

이렇게 바뀌는데, 취소선표시는 이탤릭체로 들어간 8px이 사라진 것이 아닌 우선순위가 바뀐 것을 의미한다.

하지만 우리 실습에서는

@import url(./normalize.css);

@import url(./reset.css);

를 활용하여 각 각 태그에 수정하지 않고 임포트한 파일을 이용하여 한번에 css가 바뀌도록 할 것임!

Reset.css란 브라우저 간의 차이를 최대한 없애는 코드를 넣어서 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다. 초기화 혹은 일반적으로 바꿔주도록 누군가 만들어 놓은 좋은 소스 중에 하나이다.

Normalize.css는 Reset.css과 조금 다른데, 약간의 디자인적인 요소가 가미되어 있다.

이듬 사이트 참고하기!

https://brunch.co.kr/@euid/2

CSS Web Font

pretendard

index.html

    <!--CSS보다 글꼴을 위에 선언(웹폰트 요청을 먼저해서 불러오기 위해)-->
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
    />
    <link rel="stylesheet" href="./styles/style.css" />

style.css

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

CSS Layout

먼저 실습 웹 사이트의 완성본(index.complete.html)을 이용하여 레이아웃을 분석해보았다.

구글 확장 프로그램 이용

1. Visbug을 이용하여 width, height값을 확인할 수 있다.

2. Web Developer -> Miscellaneous -> Display Ruler 측정하고 싶은 범위를 드래그하여 지정하면 아래에 너비, 높이 값을 볼 수 있다.

레이아웃 설계

레이아웃 설계 예시

~이건 그냥~ 모바일의 경우 예시

CSS float

float 이란 CSS 속성 float은 '띄우다'라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로부터 띄워 수평 정렬 할 때 사용합니다. float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치됩니다.

Display

clearfix

문서의 구조에서 부모요소가 자식요소를 감싸고 있는 형태에서 자식에게 float요소나, positioon을 적용하면 부모가 더 이상 자식을 감싸지 않게 된다. 그래서 부모의 높이가 0px가 되는 현상이다.

첫번째 방법

가장 기본적인 방법으로, overflow:hidden;을 부모에게 설정한다. (overflow는 넘치는 요소에 대한 처리!)

부모요소{overflow:hidden}

두번째 방법

부모요소:after에게 아래 css를 적용한다.

부모요소:after { content: ""; clear: both; display: table; }

세번쨰 방법

부모요소에 display: flow-root; 를 적용한다. (edge에서는 지원하나 IE에서 지원안함)

부모 {
  display: flow-root;
  /* overflow: hidden과 관련되어 있음 */
  /* 실무에서는 부모요소에 clearfix를 주는 방법을 많이 사용 */
}

자식 {
  float: left;
}

clear

clear속성은 float속성을 통해 태그를 자연스럽게 흐르도록한 뒤 이후 흐름을 제거하기 위해 사용한다.

동기분이 정리본 올려주신거 참고해서 더 공부하고 정리해봐야겠다... 넘나 감사한것...

현재 시각 1:35.. 수업끝나고 바로 원주왔더니 피곤쓰.. 너무 졸리다..자야겠다..^^

저작자표시 비영리 변경금지 (새창열림)

'개발 > Today I Learned' 카테고리의 다른 글

멋사 D+6 회고 특강 / HTML + CSS (1)	2022.12.06
멋사 D+5 Git + HTML + CSS (0)	2022.12.02
멋사 D+3 HTML/CSS + Git (0)	2022.11.30
멋사 D+2 환경 설정 + Git + CLI (0)	2022.11.29
멋사 D+1 HTML/CSS (0)	2022.11.28