스프링에서 xml파일등의 클라이언트단을 건드릴 때 $() form 안에 여러 변수나 url을 입력하는 경우가 흔했고, 왜 이렇게 넣는지도 모르는 채 진행을 했었다. 문법을 배울 때와는 별개로 프론트와 백의 상호작용을 알 수 있었고, 또 JS에서는 어떤 식으로 데이터를 받아와서 크롤링을 했었는지 복습했고 또 더 잘 알수 있었다.
예전에 css/html만 깔짝이면서 홈페이지를 만들려고 했을 때 index.html과 css sheet를 수십번 갈아엎고 다시 만들고 했던 기억이 난다. 산을 보지 못하고 나무만 보면서 전진하려니 내가 무엇을 만들고 있는지, 무엇을 건드려야 하는지에 대해서 점점 흐려졌기 때문이었다.
주특기를 공부하다보면 HTML, CSS, BootStrap과 같은 아주아주 기본적인 요소들에 흥미도 잃고 점점 더 감을 잃는다.
이렇게라도 조금씩 공부해 놔야 추후 프로젝트를 들어갔을때 협업이나, 아니면 기초적인 것들에 대해 신경을 많이 쓸 수 있을 것 같다. 나중에 꿈꿔왔던 개인프로젝트를 하기 위해선 조금 더 연습해보는것을 목표로 하자.
Head tag 안에 Style을 넣기에는 1억줄의 Style Code가 있다면, 정말 하나하나 보기가 어려울 것이다.
HTML은 크게 '속성 정보'를 나타내는 Head와 '페이지의 내용'을 담는 Body로 구성된다.
꼭 Ctrl + Shift + L(자동 정렬), Tab(우측으로), Shift+Tab(좌측으로)을 눌러서 줄을 맞춰 주자. 정말 편하다.
div, span, p태그
div태그는 division의 약자로, '분할'을 이야기한다.
p태그는 paragraph의 약자로, '문단'을 이야기한다.
div, p태그와 span태그의 가장 큰 차이는, 블록 요소인지 아닌지의 차이다.
블록 요소는 브라우저의 양 끝을 차지하지만, 인라인 요소는 자기가 쓴 만큼에 대해서만 차지한다.
=>div와 p는 줄바꿈이 되지만 span은 줄바꿈이 되지 않는다.
div 태그와 p태그의 차이점을 알기 위해서는 부모-자식간의 요소를 알아야 하는데,
위와 같은 그림일 경우 빨간색 div는 초록색 div와 파란색 div의 부모이며,
초록색과 파란색 div는 빨간색 div가 변할 때 자동으로 변하게 된다.
같은 원리를 적용해서, 초록색 div의 속성을 변경할 경우,
'나는 버튼1'의 속성은 변하겠지만, '나는 버튼2'의 속성은 변하지 않는다.
<div>는 자식으로 블록 요소들이 올 수 있지만, <p>는 자식으로 인라인 요소밖에 올 수 없다.
따라서 div는 '문단을 나누는 역할'을, p는 실질적인 텍스트 정보를 입력하는 데 사용한다.
처음에는 div와 p를 혼용할 수 있겠으나, 조금씩 꼼꼼히 생각해 보고 용도에 맞게 사용하도록 하자 :0
ul, ol, li
ul태그는 unordered list, 순서가 없는 리스트를 얘기한다.
반대로 ol태그는 ordered list, 순서를 가지는 리스트를 말한다.
그리고 li로 list임을 말해준다.
CSS
css는 html 속 style 코드를 똑 떼서 하나의 sheet로 만든 것이다.
CSS를 설정할 때는 지칭할 무언가가 필요하다. (~를 꾸며줘 : ~를 지칭하는것이 필요함)
~는 class로 나타낼 수도 있고, id로 나타낼 수도 있다. 그리고 *로 전체를 지칭할수도 있다.
자주 쓰이는 CSS
CSS의 설정값들은 필요할 때 마다 챙겨서 보면 된다.
예를 들어 background의 설정값은 3개가 한 세트, display-flex는 4개가 한 세트라고 생각하자
.background{
background-image : img의 url
background-size : cover;
background-position:center;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
#text-align : 문자를 정렬할 때 사용
#border-radius : 이미지 귀퉁이를 다듬을 때 사용
#width-max : 모바일 배려용으로, 단위는 %를 쓴다. ~%까지는 계속 배율 유지, 이이상으로는 원사이즈 유지
}