위코드 첫날이 시작되었다. 두둥 ...
사전스터디 팀원들과 얼굴도 처음 마주하고 이야기도 많이 나눴다.
그리고 처음으로 과제(?)를 받았는데 레플릿 (Replieit)을 푸는 것이었다.
수요일까지 총 26개의 레플릿을 풀어야하는데 15까지밖에 못했다..... 그 이유는 나를 막히게 한 2가지 주제가 있어서 그런데 그 부분을 중점적으로 정리하고 추가적으로 기존에 HTML CSS 공부를 하면서 몰랐거나 알았지만 까먹은 부분들을 간략하게 기록해야겠다.
HTML 공간 띄우기(?) - 6
HTML 문서 내에서 몇 번을 스페이스와 엔터를 쳐도 이게 웹사이트에 반영안된다. 따라서 들여쓰기를 표현하는 여러 방법들을 배웠는데 과제를 해결하는 과정에서 문제가 발생했다.
&nbp
저 기호를 HTML문서 안에 넣으면 들여쓰길로 간주할 수 있다. 과제 중에 &nbp를 두 번 기록한 것과 같은 결과를 출력하도록 하는 것이이었다.
과제에서는 text indent CSS요소로 표현을 하도록 했는데 저 &nbp가 몇 픽셀인지 파악이 안되는 것이었다.
그래서 다음과 같은 사고과정으로 진행을 해보았다.
- &nbp 에 해당하는 크기를 20px 부터 5px까지 일일이 넣어보면서 비교했는데 이건 뭔가 아닌 것 같았다. 설혹 비슷하다고 해도 실제 똑같은지는 알 수 없기 때문이다.
그냥 20px로 적용을 해보니 크기가 차이났다 (&nbp 는 10px이 아닌 것이다)
2.그러면 각 띄어쓰는 1칸의 크기를 지정해주면 되는 것이 아닐까?라는 생각에 word -spacing을 적용해보았다.
그러나 1번과 같은 문제에 직면했다. &nbp가 몇 크기인지 모르는데 일일이 지정해주는 것은 아닐 것 같았다.
- 마지막으로 text-indent의 크기를 일일이 px로 모니터에따라 바뀌도록 하는 것이 아니라 폰트별로 지정을 해보기로 했다.
1em으로 우선 적용해보았다.
그런데 1em으로는 차이가 여전히 벌어졌다. 그래서 자세한 CSS 크기단위를 참고했다. 다시 1ex로 적용을 해보니 2 * &nbp와 크기가 동일했다!!!
그렇다! &nbp는 폰트의 소문자와 동일한 크기인 것이다 -- 해결!
CSS에 직접 이미지 넣기
이 과정을 하면서 가장 큰 문제는 공간의 개념을 이해하는 것이었다.
일반적으로는 다음과 같은 방법으로 이미지를 삽입한다.
<img alt="js" src="https://www.w3schools.com/whatis/img_js.png">이런 방식으로 직접 img 태그를 이용해서 해당 이미지의 링크를 넣는 방식으로 넣는데 이 방식보다 다른 방식인 CSS 문서에 직접 넣는 방법이 있다. 우선은 넣을 이미지는 다음과 같은 JS이미지다.
이 과정에서 유념해야 하는 과정 2가지는 다음과 같다.
- 해당 공간의 크기 부여
이렇게 배경에 url을 입력해서 배경이미지를 출력하는데 결과를 보면 의도한 이미지는 나타나지 않을 것이다 (의도한 이미지: JS그림)
그러면 왜 안나오는 것일까? 그 이유는 해당 이미지가 들어갈 적절한 공간이 아직 확보가 되지 않았기 때문이다. 해당 공간에 이미지를 넣을 때 크기를 가늠할 수 없어 0px * 0px의 값이 기본으로 부여가 된다.
따라서 여기에 width와 height을 지정해주면 이미지가 나타난다.
- 이미지 사이즈 조정
근데 뭔가 이상하다. 저 JS그림 오른쪽이 잘려서 나온다. 이유는 이미지 크기보다 공간이 작기 때문이다. 그러면 이 공간에 이미지를 맞추려면 어떻게 해야할까?? 이때 background-size : 100%가 필요하다. 이러면 부여된 공간에 딱 맞추어 이미지 크기가 조정된다. 50%(너비,높이 각각 반반인 그림으로 채우기)와 비교해보면 좀 더 확인이 쉽다. 
background-size: 100%
background-size: 50%
HTML 직접 태그 입력 vs CSS 문서 기록
그러면 둘 중에 어떤 것이 좀 더 좋은가?
이건 상황에 따라 다를 것 같다.
Semantic이라는 개념이다. 쉽게말해서 그 요소를 보면 해당 문서의 구성이 손쉽게 파악이 가능한 것이다. 부연 설명은 요기로 링크텍스트
HTML 태그에 img를 입력하면 기존에 div와 비교해서 직관적으로 저 태그는 이미지를 삽입하는 요소인 것을 알 수 있다. 반면 CSS에 넣게 되면 HTML 문서자체에서 파악은 안된다.
그러면 CSS 문서에 넣는 것은 장점이 없을까?? CSS 문서 자체에 넣는 이유가 여러가지 효과를 주기 위함이다. 조금 더 바로바로 해당 요소에 대해서 변경을 가할 수 있다는 것이 장점이라고 할 수 있다. 다만 이건 클래스 지정해서 적용하면 거의 비슷해서 특별히 장점은 없는 듯하다~~~
그외 추가적인 개념 정리
head 값
: 디바이스 가로 크기 == 웹 페이지 가로 ( 모바일에서 웹사이트 예쁘게 보이려면 추가해야 하는 정보)
span vs p
span --> inline 요소 : 여러 요소가 한 줄에 이어서
p --> block 요소 : 한 자리를 블럭처럼 차지
CSS 표현 방식 여러가지
1.inline (HTML에 직접) -- 난잡
2.HTML 내부에 < style > 기록하기 --- 난잡
3.CSS 문서에 기록 -- 유지보수 쉬움
폰트 보험
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}
이렇게 , 로 다음 폰트를 적어주면 해당 폰트를 브라우저가 출력하지 못했을 때 다음 폰트를 출력 이 부분은 웹폰트로도 해결가능
패딩 보더 마진
위 이미지의 파란색 부분에 나온 수치는 마진과 패딩 보더를 제외한 순수 컨텐츠 영역 수치
마진(패딩, 보더)의 크기를 각각 지정할 수 있는데 그 순서는 12시 , 3시, 6시 , 9시
width를 지정후에 마진 패딩 보더를 적용하면 width + 마진(패딩 보더) 크기만큼 커짐
이를 막기 위해서 box-sizing: border-box; 적용
css selector priority
tag <<<< class <<<< id<<<<<inline(직접 태그안에 적기)
이게 순서지만 class로 각 요소를 구분해주는 것이 가장 좋다
.jpeg)