[html,css] HTML & CSS 자세히 알아보기
Yanako
[html,css] HTML & CSS 자세히 알아보기Web_Frontend/HTML & CSS2023. 12. 14. 18:05@Yanako
Table of Contents

HTML & CSS 자세히 알아보기

오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프

 

css 코드 서식

인라인 스타일을 사용하지 않을 때(style 속성을 통해) CSS 코드는 일반적으로 다음과 같다.

p {
    font-family: sans-serif;
    text-align: center;
}

이 코드는 읽기 쉽게 작성되어 있다.

 

하지만, 반드시 위처럼 작성해야 하는 것은 아니며, 이론적으로는 아래와 같이 작성할 수도 있다.

p {font-family: sans-serif;text-align: center;}

그러나 위와 같은 코드는 이해하고 유지 관리하기가 훨씬 더 어렵기 때문에 일반적으로 읽기 쉽게 작성한 맨 위의 서식처럼 작성한다.

 

다음은 CSS 코드 형식 지정에 대한 몇 가지 규칙이다.

  • 선택자(위의 예에서 p)와 여는 중괄호는 일반적으로 같은 줄에 들어감
  • 그런 다음 한 줄에 하나의 CSS 속성 + 해당 값이 있음
  • 모든 줄은 세미콜론으로 끝나야만 함
  • 줄이 들여쓰기 됨("문서 서식" 바로 가기를 통해 자동으로 또는 키보드의 TAB 키를 눌렀기 때문에)
  • 닫는 중괄호는 들여 쓰기 없이 별도의 줄에 들어감

vs code 단축키

General

  • SHIFT + CMD + P (opens the command palette, "Show All Commands")
  • SHIFT + CTRL + ´ (opens the integrated terminal, "Toggle Integrated Terminal")

Coding

  • CMD + D (select next matching code, "Add Selection to Next Find Match")
  • ALT + CMD + Up Arrow Key (adds the cursor at the same position in the prior line, "Add Cursor Above")
  • ALT + CMD + Down Arrow Key (adds the cursor at the same position in the next line, "Add Cursor Below")
  • SHIFT + ALT + F (format the entire code page => Depending on the programming language, you might have to install an extension to activate this feature, "Format Document")
  • SHIFT + CMD + 7 (comment out the selected code lines, "Toggle Line Comment")
  • CMD + ALT + A (comment out the selected code block, "Toggle Block Comment")

Project Management

  • CTRL + TAB (switch between open files in current project, "Open Next Recently Used Editor in Group")
  • CMD + P (switch between recently opened files, "Open Recent...")
  • CTRL + R (switch between projects, Open Recent...)

 

코드의 주석 추가방법

HTML

<-- 주석내용 -->

<-- 
	주석으로 추가할 컨텐츠들 
-->

CSS

/* 	주석 내용 */

/* 	
	주석으로 처리할 내용들
*/

 

<link> 태그

<link href="cssFile.css" rel="stypesheet" />

링크를 추가한다고 해서 css 코드나 여타 파일들이 HTML 파일에 추가되는 것이 아니라,

  1. html 이 브라우저에 성공적으로 로딩된 뒤,
  2. css파일 혹은 추가된 파일들을 추가로 요청해서 받아오는 방식임.

따라서 css 파일이 response 되지 않는다고 하더라도, 우선 html요소는 화면에 뜨게 되는 것.

 

id 선택자

html 요소에 id 요소를 추가한 뒤,

<p id="아이디"></p>

css 파일에서 아래와 같은 양식으로 사용함.

.아이디 {
	//스타일링
}

cf) 아이디는 모든 문자는 소문자로, 공백은 대시로 표시하는 방식을 사용함.

 

요소 선택자

아래와 같이 html 파일이 작성되어 있을 때

<h1>제목제목</h1>
<p>내용내용</p>

css를 아래와 같이 적용함

h1 {
	//스타일링
}
p {
	//스타일링
}

 

CSS에서의 사이즈 지정

  • Absolut 사이즈
    • px.,
  • Relative 사이즈
    • rem, %, vh, vw.,

글꼴 font-family

모든 운영체제나 환경이 지원하는 글꼴을 사용하면 글자가 깨지지 않음.

하지만 일반적이지 않은 글꼴을 사용하기 위해서는 아래와 같은 과정이 필요함.

 

  • 구글 폰트와 같은 폰트 link을 제공하는 사이트에서 원하는 link을 가져오기
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
  • 아래와 같이 css에 font-family 지정하기
p {
	font-family : 'Noto Sans KR', sans-serif;
}
  • Noto Sans KR : 서버에서 받아올 폰트
  • sans-serif : 서버에서 폰트 로드 실패 시 적용할 폰트.

HTML, CSS가 텍스트와 공백을 처리하는 방법

브라우저에서 공백을 처리하는 방법

  • 기본적으로 보통의 브라우저는 HTML과 CSS 코드에서 줄 바꿈과 들여 쓰기를 무시함.
  • 따라서 보기 좋은 코드를 작성하기 위해, 개발자들은 개행과 들여쓰기를 통한 구조화를 많이 진행함.

HTML에서 특수 문자를 출력하는 방법

  • <pre> 일반 텍스트로 사용할 특수기호 </pre>
  • > : &gt;
  • < : &lt;

<image src=””/>

이미지를 보이기 위한 태그

<body>
	<img src="이미지 파일 위치 및 파일 명.이미지 확장자명"/>
</body>

이미지 css

image {
	width: 너비;
	height: 높이;
	border-redious : 테두리 둥굴게 할 정도;
}

body {
	text-align: center;
}

 

css 스타일링 종류 및 역할 정리

 

CSS 참고서 - CSS: Cascading Style Sheets | MDN

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다.

developer.mozilla.org

 

파일 이름 규칙

html 파일, css 파일의 경우 케밥케이스 네이밍 규칙을 주로 사용함

 

CSS 파일의 분리

여러 페이지에 공유될 css는 별도의 파일로 빼서 코드의 중복을 줄이는 것이 좋다.

 

개발 서버 & 로컬 웹사이트 주소

127.0.0.1

로컬 머신에서 로컬 머신으로 웹사이트를 호스트 할 때 사용하는 예약된 IP.

localhost

로컬 머신에서 사용되는 예약된 IP인 127.0.0.1을 사용하기 위한 특수도메인.

:8080

특정 아이피에서 접근하고자 하는 포트를 명명함. 보통 spring에서는 8080이 default값임

 

CSS 상속

상속되는 속성

  • 요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산값을 얻음
  • 오직 문서의 루트 요소만 속성의 요약절에 주어진 초기값을 얻음

cf) 상속되는 속성의 대표적인 예시 : color

 

상속되지 않는 속성

  • 요소의 상속되지 않는 속성(Mozilla 코드에서는 가끔 reset 속성으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻음

cf) 상속되지 않는 속성의 대표적인 예시 : border

inherit

  • 작성자가 명시적으로 상속을 지정할 수 있게 함.
  • 상속되는 속성과 상속되지 않는 속성 모두에 작동

 

CSS 계단식 스타일 시트(casecade style sheet)

casecade

  • 사용자 에이전트가 다양한 소스에서 발생하는 속성 값을 결합하는 방법을 정의하는 알고리즘
  • 둘 이상의 원점, 캐스케이드 레이어 또는 @scope블록의 선언이 요소의 속성 값을 설정할 때 우선순위를 갖는 원점 및 레이어를 정의

Cascading Style Sheets

  • 선택자 가 요소와 일치하면 우선순위가 가장 높은 원본의 속성 값이 적용됨
    • 우선순위가 낮은 원본 또는 레이어의 선택기가 더 큰 특이성을 갖는 경우에도 적용됨.
  • 위에 첨부된 문서에서는 CSS 선언의 계단식 배열 순서, 계단식 레이어 및 원본 유형에 대해 설명함

casecade style의 적용 순서

1 user-agent - 첫 번째로 선언된 레이어 normal
  user-agent - 마지막으로 선언된 레이어  
  사용자 에이전트 - 계층화되지 않은 스타일  
2 user - 처음으로 선언된 레이어 normal
  user - 마지막으로 선언된 레이어  
  사용자 - 계층화되지 않은 스타일  
삼 작성자 - 첫 번째로 선언된 레이어 normal
  작성자 - 마지막으로 선언된 레이어  
  작성자 - 계층화되지 않은 스타일  
  인라인style  
4 애니메이션  
5 작성자 - 계층화되지 않은 스타일 !important
  작성자 - 마지막으로 선언된 레이어  
  작성자 - 첫 번째로 선언된 레이어  
  인라인style  
6 사용자 - 계층화되지 않은 스타일 !important
  user - 마지막으로 선언된 레이어  
  user - 처음으로 선언된 레이어  
7 사용자 에이전트 - 계층화되지 않은 스타일 !important
  user-agent - 마지막으로 선언된 레이어  
  user-agent - 첫 번째로 선언된 레이어  
8 전환  
  • Cascading Style은 오름차순임.
    • 즉, 사용자, 작성자 또는 사용자 에이전트 스타일로 선언되었는지 여부에 관계없이 애니메이션이 일반 값보다 우선하고 중요한 값이 애니메이션보다 우선하며 전환이 중요한 값보다 우선함.

CSS 박스 모델(margin, padding)

Box의 구성

  • 콘텐츠 박스: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 width and height와 같은 속성을 사용해서 정할 수 있습니다.
  • 패딩 박스: 패딩은 콘텐츠 주변을 마치 공백처럼 자리 잡습니다. 패딩의 크기는 padding와 관련 속성을 사용해 제어할 수 있습니다.
  • 테두리 박스: 테두리 박스는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 border와 관련 속성을 사용하여 제어할 수 있습니다.
  • 여백 박스: 여백은 가장 바깥쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 박스와 다른 요소 사이 공백 역할을 합니다. 여백 박스의 크기는 margin와 관련 속성을 사용하여 제어될 수 있습니다.

 

선택자와 결합자

 

css 선택자 종류

태그 유형 선택자

HTML 요소 {
	//HTML 요소에 적용할 스타일
}

 p {
 	//스타일
 }

아이디 선택자

#아이디 {
	//아이디에 적용할 스타일
    //페이지당 1개의 컨텐츠에만 적용됨
}

 #my-id {
 	//스타일
 }

클래스 선택자

.클래스명 {
	//클래스에 적용할 스타일
    //해당 클래스명으로 적용된 모든 컨텐츠에 적용됨
}

 .my-class {
 	//스타일
 }

속성 선택자

[속성명] {
	//해당 속성을 가진 컨텐츠에 적용할 스타일
}

 [src] {
 	//스타일
 }

범용 선택자(전체 선택자)

* {
	//모든 요소에 지정
}

그룹화 선택자(선택자 리스트)

선택자1, 선택자2 {
	//해당 선택자들이 적용된 요소 모두에 적용할 스타일
}

 #my-id, .my-class {
 	//스타일
 }

결합 선택자

요소.클래스명 {
	//해당 요소중 해당하는 클래스를 가진 컨텐츠에 적용할 스타일
}

p.my-class {
 	//스타일
 }

의사 선택자

요소:이벤트 {
	//해당 요소에 해당 이벤트가 발생할 시 적용할 스타일
}

a: hover {
 	//스타일
 }

 

 

저작자표시 비영리 변경금지

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

[css] CSS 레이아웃과 포지셔닝  (1) 2023.12.19
[html, css, ]HTML & CSS 요약, 호스팅과 배포, git과 github, 버전관리  (0) 2023.12.15
[html,css] 웹개발 기본과 HTML & CSS  (0) 2023.12.13
[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)  (0) 2021.11.18
[HTML] 레이아웃 구성 태그(div, span)  (0) 2021.11.18
Yanako
@Yanako :: Yana's coding story였는데요, 우당탕탕 개발일지가 맞는것같

야나의 코딩 일기장 :) #코딩블로그 #기술블로그 #코딩 #조금씩,꾸준히

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

Web_Frontend/HTML & CSS 추천 글
more
image

티스토리툴바