섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [5일차], 섹션 3: HTML & CSS 자세히 알아보기 [6일차]

day 5

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

기본적으로 브라우저는 HTML과 CSS 코드에서 줄 바꿈과 들여쓰기를 무시합니다. 

우리는 인간이므로 일반적으로 많은 들여쓰기와 줄바꿈ㅇ르 사용해서 코드를 구조화하고 구성하는 방식을 사용합니다.

 

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

<pre>...</pre> 태그 이용 (공백도 보존되며 무시되지 않습니다.)

HTML 엔티티 이용 ex) &gt; -> ">", &lt; -> "<"

 

이미지 추가하기 

<img src="/challenges-trophy.jpg" alt="challenges-trophy" />

 

src는 이미지 주소, alt는 만약 이미지가 로드되지않았을 때 출력되는 내용

 

이미지 가운제 정렬하는 방법 

나는 처음에 text-align: center;을 이용해서 가운데 정렬 시도했으나 적용이 안됨 

가장 쉬운 해결 방법은 img의 부모 요소인 body에 text-align: center;을 작성 

해결

 

! 단축키 

해당 단축키를 사용하면 기본적인 HTML 뼈대 완성 

 

새로운 사이트 연결하듯이 새로운 페이지 연결하는 방법은 경로를 지정해주면 쉽게 할 수 있다. 

 

파일 이름 규칙에 대해서

개발에서는 이름 지정에 관한 많은 규칙이 있다. 

예를 들어 기본 HTMl 파일의 이름을 index.html로 지정한 경우다. - 이것은 일반적인 관례인듯

그리고 일부 호스팅 제공업체는 파일을 성공적으로 제공하기 위해 해당 파일 이름을 요구하는 경우가 있다.

그러나 일반적으로 My First File.html로 이름을 지정할 수 있다. 그럼에도 불구하고 이러한 일반적인 규칙을 따르는 것이 좋다.

• HTML 파일의 경우 일반적으로 로드될 때 페이지의 주요 목적이나 내용을 설명하는 이름을 지정하는 것이 좋다.
• 페이지별 CSS 파일의 경우 HTML 파일 이름을 반복하는 것이 좋다.
• 여러 HTML 파일에 속하는 CSS 파일의 경우 base.css와 같은 일반 이름을 선택하거나 html 파일 용도를 설명할 수 있도록 정하는 것이 좋다.
• 모두 소문자로 작성하는 것이 좋다.
• -(대시)를 제외한 특수 문자를 사용하지 않고 파일 이름을 작성 추천.

웹 사이트를 만들다보면 여러 파일을 만들게 되는데 폴더를 만들어서 파일 관리를 잘하자

파일 위치도 바꿔주는 것도 잊지 말자

 

css 파일을 외부에 만들자!

css 파일 중 겹치는 부분이 있으면 하나의 css 파일을 만들어서 코드 중복을 줄이자!

---

day 6

live server extension 설치 추천

: 내가 해당 파일을 저장하면 새로고침을 안해도 자동으로 로드해줌

 

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

 

개발서버란?

로컬 개발 웹 서버 

인터넷에 노출시키는 것이 아님

 

127.0.0.1 ?

호스트(=제공/제공)

로컬 컴퓨터에 예약된 특별한 IP - (로컬 웹 서버를 실행 중인 경우) 자신의 머신에 도달

월드 와이드 웹의 다른 컴퓨터에 할당되지 않은 IP 주소 - 대신 항상 로컬 컴퓨터를 가리키는 "자리 표시자"로 예약되어 있음

==> localhost:5500 === 127.0.0.1 대체

 

:5500 -> 포트

따라서 단일 시스템은 3개의 다른 포트에서 3개의 다른 웹 사이트를 호스팅/제공 할 수 있다.

 

월드 와이드 웹에 노출될 때 웹 사이트는 일반적으로 80(http) 또는 443(https)에서 제공

 

해당 사이트 접속시 포트 번호까지 칠 필요는 없음 --> 기본값이기 때문에 브라우저가 자동으로 이 포트 사용

 

리스트 사용할 수 있을 때 사용하는 것이 좋음

ol -> 순서 있는 리스트

ul -> 순서 없는 리스트

li로 위의 리스트 안에 작성

 

부모, 자식, 컨테이너 이해하기

상속 받는 관계 잘 이해하기

 

상속 VS Cascading Style Sheets VS Specificity 

• Inheritance 
  • (Selected) container rules apply to descendants
• css 계단 상속 로직 
  • Multiple rules can be applied th the same element
• Specificity
  • More specific selector's rule wins over less specific selector

1순위: 인라인 스타일

2순위: id 스타일

3순위: class 스타일

4순위: 태그 스타일

 

 

오늘 하루 동안 공부한 코드

Section2.zip

0.03MB