오늘 오전에는, 회고 관련 특강이 있었기 때문에 진도를 많이 나가진 않았다.
덕분에 ~ 정리할게 줄어든거야 ~ 소리질러 ~ ye ~

경로

코딩을 하며 이미지를 삽입하고, css를 링크하며 경로가 상당히 중요하다는 것을 느낀다. 경로는 상대 경로, 절대 경로 두가지로 나눌 수 있다.

1. 절대경로

• 루트 디렉토리(/)를 포함한 주소를 갖는 경로

절대 경로는, 가장 근간이 되는 루트 디렉토리부터 경로를 체크하는 것을 의미한다. 그렇기 때문에 서버가 아닌 내 컴퓨터에서 작업을 할 때 절대 경로로 이미지를 삽입하면, 냅다 C드라이브부터 경로가 시작된다. 내가 삽입하고자 하는 이미지가 C드라이브에 있지 않다면, 경로 오류가 나기 때문에 이미지가 노출되지 않는다.

URL에서 절대 경로는, 'https, http, //' < 얘를 항상 포함한다. 내가 작성한 코드에서 외부 사이트의 자료를 사용할 때 주로 사용된다.

단점

URL로 시작하는 절대 경로는, 상대 경로보다 로딩 속도가 느리다. 파일이 위치한 장소에서 시작해 경로를 찾는 상대경로와 다르게, DNS 조회를 통해 해당 파일을 찾기 때문이다.

DNS IP 주소 및 기타 데이터를 저장, 이름별로 쿼리할 수 있게 해주는 계층형 분산 데이터 베이스

2. 상대경로

• 내 위치 : ./
• 상위 폴더로 이동 : ../

상대 경로는 현재 내가 작성하는(참조하는) 파일을 기준으로 원하는 상, 하위로 경로를 이동하는 것이다.
상대 경로를 사용하면, 라이브 서버를 켜지 않아도 현재 참조하는 파일을 기준으로 경로가 시작되기 때문에 용이하다. 단 상대 경로 사용시, 절대 경로보다 더 길게 작성해야하고 직관적이지 않을 수 있다.

장점

서버 주소가 달라지더라도 폴더 구조가 같다면 따로 수정하지 않아도 된다.

3. 결론

상대 경로, 절대 경로 중에 이걸 써라! 하고 정해진 내용은 없다. 경로를 지정해야할 때 그때 상황의 특징을 파악하여 적재적소에 활용하자 !

---

UA stylesheet Reset

원하는 스타일을 부여하기 위해선, 브라우저가 자동으로 먹여버린 UA 스타일을 초기화하는 작업이 필요하다. 이 초기화를 위해 사용되는 프로퍼티 공통 값에 대해 알아보자.

1. 0

margin, padding 등에 초기화를 위해 값을 0으로 설정하는 경우가 있다. 0으로 설정하는 것보단 아래 나오는 initial로 설정하는 것이 더 권장되지만, 우리의 아픈 손가락 인터넷 익스플로러에서 initial 값이 지원되지 않는다. 그래서 범용되는 reset.css에서 0을 사용하여 초기화하는 경우를 많이 보았다.

2. initial

해당 값을 사용하면 '초기화'를 한다는 개발자의 의도가 명확히 드러난다. 브라우저가 세팅한 값이 아닌 프로퍼티 자체에 초기값으로 다시 설정할 수 있다.

body {
	margin: 8px; /* UA stylesheet */
    margin: initial; /* = 0 */
}

3. inherit

inherit 값을 사용하면 프로퍼티의 초기값이 아닌, 해당 값이 적용되는 요소의 부모가 상속하는 값을 가질 수 있다. 프로퍼티가 상속을 지원하는 경우, initial이 아닌 inherit를 쓰는 것이 더 적합하다.

4. unset

실무에서 한번도 사용해보지 않았던 unset의 등장이다. unset 역시 초기화와 관련된 코드인데, 프로퍼티의 상속 여부에 따라 적용되는 값이 다르다. 프로퍼티의 종류에 따라 알아서 inherit, initial을 적용해주니 아주 똑똑한 친구다.

• 프로퍼티 상속 지원 : inherit 적용
• 프로퍼티 상속 미지원 : initial 적용

---

CSS Selector

1. Class Selector : (*).

특정 요소에 스타일을 주기 위해 클래스를 사용한 선택자를 의미한다. 클래스를 의미하는 . (온점)으로 표기한다. 이때 . 앞에는 타입 선택자를 작성하는데, 따로 타입을 지정하지 않으면 Universal Selector가 설정된다. *는 생략 가능하다.

div.wrap {
	padding: 10px;
}

2. Combinator

결합자 라는 뜻으로, 셀렉터 사이에서 새로운 가치를 만들어 내는 역할을 한다.
하위 셀렉터, 자식 셀렉터, 인접형제 셀렉터, 일반 형제 셀렉터 등에 결합자가 사용된다. 하위 결합자와 하위 선택자의 개념이 섞일 수 있어서 아래 예시를 참고 바란다.

• ex) 하위 결합자: 띄어쓰기
• ex) 하위 선택자: .wrap img

하위 결합자 (descendant combinator)

.wrap img { /* 하위 결합자 : (띄어쓰기)*/
	border: 1px solid #ccc;
}

선택자 사이에 한 칸 띄어쓰기를 하여 사용한다. 예시를 보면, .wrap 하위의 모든 img 요소에게 스타일이 설정된다. 자식만이 아닌, 모든 자손도 해당되니 참고 !

결합자 작동 방식

.container .text-box p span { 
	border: 1px solid #ccc;
}

위의 예시를 살펴보면, { 중괄호 } 에서 가장 가까운 즉, 가장 오른쪽 끝에 있는 선택자부터 해석을 시작한다. 예시에선 span이 해당되고, 얘를 키 선택자라고 한다. 문서에서 모든 span을 찾아서 부모가 p요소이고, 그 상위 요소가 text-box라는 클래스를 가진 요소를 찾고, 또 상위에 container클래스를 가진 요소를 또 찾아서 모두 해당되는 요소에만 스타일을 적용한다.

하위 결합자 단점

span의 모든 상위 요소에서 p요소를 탐색하기 때문에, 직계자손 선택자보다 속도가 느리다. html 코드가 3000줄이라면 ... 비교할 수 없이 월등히 느려질 것이다. 심지어 속도가 너무 느려 파이어폭스 사용자 인터페이스 CSS에서 제 - 명까지 되었다고 한다. 젤 편해서 주로 하위 선택자를 사용하는데 ... 이거 참 쩝이다 .. 쩝 ,, 관련한 내용은 옆의 링크를 참고하면 좋을 듯 하다. >> https://webclub.tistory.com/361

---

다른 결합자는 내일 배울 예정이다 ! 오늘도 새롭게 알게된 내용이 있어서 아주 즐겁다. 클래스 셀렉터 앞에 유니버셜 셀렉터가 생략된 것이었다니 ,,, ,,, ! 완전히 이럴수가다. 겨우 3일차지만 ! 아직은 계획대로 되고 있다 !! 앞으로도 화이팅 가보자고 ~
오늘 선생님 조 - 크가 꽤나 취향 저격이었다. 앞으로도 잘 부탁드립니다 ! 😝