멋쟁이사자처럼 프론트엔드스쿨 1-4

갓희·2023년 12월 7일
CSShtml멋쟁이사자처럼프론트엔드
2

멋쟁이사자처럼

목록 보기
3/6
post-thumbnail

개발자로서의 자세

  • 좋은 개발자가 되기 위해선 최대한 많은 방법론을 알고 있는 것이 도움된다
  • 코드 결과에서 내가 모르는 무언가가 발견되는 것: 공부의 시작이다!
    사소할지라도, 동작에 대해 의문점을 가지자
  • 내가 모르는 결과물이 나오면 그것을 관찰해야 한다
    문제 인식이 중요하다는 것

경로 구별을 확실하게 해야 한다.

경로에 대해서는 어제 멘토님께서 주신 키워드 목록에 있어 미리 예습을 했던 부분이었다!
상대경로와 절대경로에 대해서 알아봤었는데, 오늘 수업에서는 HTML과 CSS 속에서의 경로 표현에 대해 배웠다.
.
.
수업 중간에 어떤 분께서 질문을 하셨다.

Q. 폴더에 들어가서 html 파일을 열면 div 배경이 보이지 않고,
VS CODE 속 Open live를 통해 들어가면 div 배경이 보여요.

Ex. 문제의 코드 (재현한게 이게 맞는지 모르겠지만.. 내 예상)

<!DOCTYPE html>
<html>
	<head>
		<title>멋쟁이 사자처럼</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
				<img src="/images/profile.png">
				<h1>JANE DOE</h1>
		</div>
	</body>
</html>

이 질문을 보고 예습을 조금 해서 그런지, 경로 문제라는 것을 알게 되었다.
그러나 어떤 이유로 다르게 나타날까? 에 대해서는 명확하게 알지 못하였다.
그래서 왜 그런가에 대해 강사님과 멘토님께서 설명을 해주셨고,
그것을 바탕으로 좀 더 살을 붙여 아래에서 설명을 해볼 것이다..! (내가 뭐라고....)

먼저, '경로'란?

프로그래밍 언어, 운영체제 등에서 컴퓨터의 파일을 찾아가는 방법.
절대경로와 상대경로로 구분하여 사용할 수 있다.

아래 경로는 다 다른 경로를 나타낸다. 무엇이 다를까?

  • ./
  • ../
  • /
  1. ./ 는 현재 디렉토리의 위치에 접근하는 방법이다.
  2. ../는 현재 디렉토리의 상위 디렉토리의 위치에 접근하는 방법이다.
  3. /는 최상위 디렉토리(루트 디렉토리) 접근 방법이다.

저게 뭔진 구분은 가는데.. 좀 자세히 알려줄래? 하는 분을 위해..
(예를 들어 먼 미래의 나)

1. 절대경로 Absolute path

파일의 최상위 폴더(root)부터 해당 파일까지의 전체 경로
즉, 파일이나 폴더를 최상위 폴더로부터 전체 경로를 통해 지정하는 방식이다.

더 쉽게 풀어보자면, 해당 파일이나 이미지 등의 위치를 포함한 전체 주소를 말한다.

  • 특징
    • 다른 페이지로 이동해도, 링크된 자원을 찾을 수 있다.
      : 항상 같은 위치를 가리키기 때문이다.
    • 파일이나 폴더의 위치에 상관없이 항상 정확한 경로를 지정할 수 있다.
    • 예시: https://www.google.com/, C:/Users/username/desktop/Test/test/index.html
  • 장점
    • 폴더 구성을 눈으로 쉽게 볼 수 있다.
    • 어느 곳에서든 경로에 접근할 수 있다.
  • 단점
    • 경로가 길고 복잡해질 수 있다.
    • 파일이 다른 위치로 이동할 때마다 경로를 수정해주어야 한다.

2. 상대경로 Relative path

현재 웹 페이지나 폴더의 위치를 기준으로 해당 파일까지의 위치를 작성한 경로
현재 위치를 기준으로 상대적인 위치를 표현하는 방식이다.

  • 특징
    • 웹 페이지나 폴더의 파일이 이동해도 자원의 상대적 위치가 변경되지 않는다면 정상적으로 작동한다.
    • 항상 비교할 대상이 있어야 한다
      : 기준 경로를 기준으로 상대경로가 구성되기 때문이다.
    • 예시: ./image/cat.png: 현재 폴더와 같은 위치에 있는 파일
      ../image/cat.png: 현재 폴더의 상위 폴더에 위치한 image 폴더 속의 파일
  • 장점
    • 폴더 구성이 상대적으로 지정되어 있기 때문에 서버나 폴더를 옮길 때 재설정이 필요없다.
    • 경로가 자주 바뀌거나 최초 디렉토리가 서로 다른 OS에서 작동해야 하는 프로그램을 만드는 경우, 경로를 일일히 수정하지 않아도 된다.
  • 단점
    • 폴더의 구성을 눈으로 볼 수 없다.

3. 그렇다면 질문에 대한 답은?

이것은 절대경로 방식을 사용했을 때 생길 수 있는 문제이다.
위의 예시코드를 바탕으로 설명해보겠다.

vs code속 live server에서는 현재 작업 중인 폴더를 기준으로 최상위 폴더를 설정한다.
예를 들어, 현재 작업 중인 파일의 전체 경로가
C:/Users/username/desktop/Day2/style.css 이고,
현재 작업 중인 파일은 style.css 라고 하자.
또한, 내가 지금 필요한 이미지의 전체 경로는 C:/Users/username/desktop/Day2/images/profile.png 라고 가정한다.

<img src="/images/profile.png"> 를 입력하고,
css파일을 live server로 확인해 보면 당연히 이미지가 나올 것이다.
live server에서 최상위 폴더는 현재 작업 중인 폴더인 Day2로 설정되었기 때문이다.
Day2 폴더에는 images라는 하위 폴더가 있고, 이를 live server가 알아들었기 때문에 당연히 live server에서는 이미지가 나올 것이다.

그런데, 작업 파일을 바로 여는 방식은 내 컴퓨터 전체 기준에서 최상위 폴더를 설정한다.
위의 가정과 똑같다고 생각했을 때, 당연히 <img src="/images/profile.png">를 입력하면 이미지가 나오지 않을 것이다.
작업 파일을 바로 여는 방식은 전체 기준에서 최상위니까..
<img src="/images/profile.png">를 html은 이미지 파일을 못찾았을 것이다.
그래서 이미지가 나오지 않았던 것이다.

따라서 둘 다 이미지가 나오게 하기 위해서는 절대경로를 사용하기보단 상대경로를 지정해주는 것이 더 쉬울 수 있다.
간단히 <img src="./images/profile.png"> 점 하나만 붙여주는 방법으로..ㅋㅋ

예시에서는 상대경로를 사용하는 것이 더 나은 방법으로 나왔지만,
사실 그때 그때 적재적소에 맞게 사용해주는 것이 더더 좋은 방법이다!
나를 괴롭게 만들었던 상대경로와 절대경로...

index.html

default html file.. 가장 유명한 처음 시작점 파일로, 웹사이트의 기본적 필수 값을 포함한다.
파일명은 관례적으로 index.html 을 사용한다.

왜 꼭 index로 해야하는가?
웹 서버에서는 원하는 모든 파일을 해당 사이트의 기본 값으로 인식하도록 구성한다.
그런데, 추가 구성 필요 없이 대부분의 웹 브라우저에서 즉시 인식되도록 한 것이 index.html 파일이기 때문에
index.html로 사용하는 것을 권장하는 것이다.

Html과 CSS 코드 짜기의 시작

1. 가장 큰 덩어리 구조

내가 만들고자하는 디자인에서, 가장 큰 덩어리 구조를 먼저 파악한 후 최소한의 컨텐츠로 시작한다.
언제나 전체적인 관점에서 레이아웃을 잡는 것이 좋다!

가장 큰 덩어리를 div로 잡고, 더 이상의 html 마크업은 그만둔 후 css로 돌아간다

2. 영역 차지와 CSS Reset

div가 얼마만큼의 영역을 차지하는지 가시화하기 위하여 background-color를 넣어준다.
그리고 브라우저에서 보면 내가 지정하지도 않은 margin이나 padding 값이 있다..?
이런 UA stylesheet를 삭제하기 위해 CSS Reset을 시작한다. (CSS Reset을 하는 이유: 서로 다른 브라우저 간의 기본 세팅값을 없애기 위하여)
Ex.

/* ua reset */
body {
    margin: initial; /* (혹은 unset;) */
}

Q. 왜 여기서 margin의 초기값인 0을 주지 않고 initial을 쓰나요?
-> margin에 초기값을 주겠다는 나의 의도를 명확히 하기 위해서 입니다.

initial을 하고보니.. caniuse가 말하길 IE 브라우저에서는 이 값을 사용할 수가 없단다..
그래서 대신 쓰는 것이 바로 unset 값이다.

* Unset

각 브라우저에 지정된 세팅값을 없애겠다!

initial도 세팅값을 없애겠다는 의도를 줄 수 있지만,
unset은 이름만 봐도 그렇듯이 더! CSS reset의 의도를 풍부하게 한다.

  • 상속 지원 속성: unset; -> inherit; 으로 받아들인다.
  • 상속 불가 속성: unset; -> initial; 으로 받아들인다.
  • 상속 가능 여부를 모른다면, unset을 사용해보자
    (그래도 MDN에서 한번 찾아보는걸 권장합니다)

3. 관례적으로, 웹사이트를 3등분해서 보자.

div로 큰 덩어리를 구분하고.. 영역을 가시화해서 얼마나 차지하는지 보고.. CSS reset까지 했다면!
이제 다시 큰 덩어리를 작은 덩어리로 분리해야 한다.
관례적으로, 엄청나게 세분화해서 보는 것보다는 3등분해서 보는 것이 좋다.

  • header: 웹사이트의 이름, 카테고리 등이 들어가는 부분
  • contents: 세부적인 내용, 3등분한 것 중 가장 많이 변화하는 부분이다.
  • footer: 카피라이트 등이 들어가는 부분

이렇게 레이아웃을 나누어주고, 가시화하고, 디자인 등을 수정하면서 html에 마크업해나가면 효율적으로 웹사이트를 만들 수 있다 ^___^!!

Class 속성

영역을 나눴는데 div가 너무 많아지니 구분하기도 어렵고,
무엇보다 div 셀렉터에 효과를 주면 모든 div에 효과가 적용이 된다.
class는 이것을 해결하기 위해 쓰는 속성(attriute)이다.

class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용한다.
다른 모든 태그에도 class로 정의하여 사용할 수 있다.
이때, class이름은 알기 쉽고 의미에 맞게 짓는 것이 적합하다.
(얼마나 이름 짓기에 고민했으면 BEM이라는 명칭도 생겼을까..
도움되는 사이트도 함께 첨부한다.
https://tech.elysia.land/%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-bem-b291ba7bff01)

Ex 1. html에서 class 속성은 아래처럼 사용한다.

<body>
        <div class="wrapper">
            <div class="header">header</div>
            <div class="contents">contents</div>
            <div class="footer">footer</div>
        </div>
    </body>
</html>

Ex 2. css에서 class를 셀렉터로 지정할 때엔 아래처럼 한다.

div.header {
    background-color: black;
}

이것은 div이면서 header이름을 가지고 있는 class만 셀렉터로 지정한다는 뜻이다.

.header 앞에 꼭 div를 써야 하는가?
난 이때까지 class 속성을 css에서 사용할 땐 당연히 .만 사용해도 되는줄 알았다.
그런데 . 앞에는 *(universal selector)가 생략되어 있었다!
그래서 .header라고 하면 타입과 상관없이 이름이 header인 모든 태그를 지정하는 것이다.
(너무 광범위하다... 타입 셀렉터 지정이 이렇게 중요하다는 것을 배웠다.)
만약 같은 이름을 가진 다른 타입의 태그가 없다면,
보통 앞의 div를 생략해서 .header로 쓰긴 하지만..
나는 만약을 위해 모두 붙일 것 같다.

하위(자손)선택자 Descendant Selector

셀렉터와 셀렉터 사이 descendant combinator(공백)를 삽입하여 만들어진 셀렉터
A 요소의 하위 B 요소를 선택하는 것이다. 두 요소는 공백으로 구분한다.

Ex. 시각적으로 보자면, 아래는 css 코드이고

.A B {
    background-color: beige;
}

아래는 html 코드이다.

<div class="A">
		<B>contents</B>
</div>

일 때, .A B의 의미는 A 요소의 하위인 B요소를 선택하겠다는 것이다.

header와 h1 사이의 공백을 descendant combinator 라고 부른다.
헷갈릴 수 있는 것으로는 자식 선택자가 있다.

  • 자식 선택자: .header > h1로 표현하며, > 는 child combinator
  • 자식 선택자와 하위 선택자의 차이점
    : 하위 선택자는 자식 선택자에 비해 더 넓은 범위를 포함한다.
    자식 선택자= 직계 부모-자식 관계에서만 가능
    하위 선택자= 조상-자손 관계에서도 가능(부모-자식 관계도 당연히 포함)
  • 사용 목적: 내가 원하는 셀렉터를 더 명확히 설정하기 위해

자투리 지식

1. div가 많아질수록 덩어리의 구분이 어렵다면?
header나 footer는 html 문서 내에서 여러 번 사용 가능한 태그이다.
(-> 그렇기때문에 class로 정의하지 않으면 광범위해진다.)
식별을 용이하게 하기 위해 되도록이면 div 대신 의미가 있는 태그를 쓰는 것이 좋다.
그러나, main은 문서 내에서 한 번만 쓸 수 있기 때문에 div를 사용하는 것이 좋다.

2. 상위 div가 하위 다른 div 태그들을 감싸는 관례적 class 이름
하위 div를 감싸는 class 이름은 wrapper로 사용하는 것을 권장함

3. 이미지 짤림 현상
1. padding 값으로 높낮이를 조절하면 이미지 값과 다르게 나온다
-> 이미지가 잘릴 수 있음
2. 따라서, height 값을 무조건 auto로 두기보단 고정값으로 설정하는 것이 때론 좋을 수 있다.
ex. 고정된 이미지의 크기를 결정해야 할 때

느낀 점

내가 두번째 타자로 블로그 리뷰를 받게 되었다... 와~!!👏👏
특강이 끝나고 3교시가 시작할 때까지 심장이.. 두근거렸음
협심증이 생긴줄 알았어요..
그리고 계속 보면서 틀린거 없나 자꾸 수정하게 됐다..ㅋㅋㅋ
그런 과정에서 공부가 또 되는거라고 합리화중🤓
처음엔 벨로그 공개한 것이 좀 부끄러웠지만,
리뷰를 받으면서 내가 미처 모르고 넘어갔던 것들과 오타들을 세세하게 집어내주셔서
공개하길 잘했다고 생각했다.
만약 나중에 공개했다면 오늘처럼 세세하게 피드백을 받지 못했을 것 같고,
글쓰는 방식이 굳어진 시점에서 그 방식을 다시 고치기란 너무 어려울 것 같기 때문이다.
얼른 다른 동료분들 블로그도 보고싶다... 두근두근
.
.
.
확실히 하루하루 갈수록 이해하는 데에 시간을 오래 잡아먹는 내용들이 많이 생긴다.
하지만, 시간을 들여 이해하고 나면 너무너무 행복하고 희열이 넘쳐흘러서 계속 개발 공부가 하고 싶어진다!
학교 다닐 때도 이렇게 열심히는 안했는데.. 확실히 공부를 할 땐 내가 흥미있어하는 것을 해야 행복한 것 같다..
아직 4일차고, HTML과 CSS 기초를 하고 있어서 나중엔 더~ 어려운게 더더~ 많이 나오겠지만
뭐.. 미래의 내가 하겠지
.
.
.

그리고 글쓰는 레이아웃을 바꿔보았다!
느낀 점을 맨 밑에 쓰는 것으로...ㅎㅎ
정보를 알기 위해 스크롤을 많이 내리기가 조금 힘들어서(는 구글링을 통해 얻은 경험담)
한 번 바꿔보았다....

그럼 오늘도 정리

끝.

profile
갓희
나의 개발일지
이전 포스트

멋쟁이사자처럼 프론트엔드스쿨 1-3

다음 포스트

멋쟁이사자처럼 프론트엔드스쿨 1-5

0개의 댓글

관련 채용 정보