사진이 너무 크다. 근데 어떻게 줄이는지 몰?루
오늘은 html과 css를 배웠는데, 오늘 배웠던 내용은 알던 내용이라 다행이도 TIL를 작성할 여유가 생겨서 한번 해보려고 한다. 처음 작성해보는 TIL이라 거의 배껴놓기 수준이겠지만.. 하다보면 나만의 그 뭐더라 스킬, 내공.. 노하우.. 아무튼 그런게 생기겠지? (책을 열심히 읽어야 하는 이유. 적절한 단어가 생각이 안날때가 많다) 제발제발제발 꾸준히 작성하거라, 미래의 나야!
HTML
html은 웹페이지의 뼈대라고 할 수 있다. 어떤 내용을 작성할건지 html을 통해 작성하면 된다.
<!DOCTYPE html> <!--이 문서가 html임을 명시-->
<html> <!-- html 시작 태그. 문서 전체 틀 구성-->
<head>
<title>Page Title</title> <!--브라우저 탭 제목-->
</head> <!--head에 대한 정보 끝-->
<body> <!--웹페이지에 보여지는 것 시작-->
<h1>Hello World!</h1>
<div>keep it up baby
<span>you can do it!</span>
</div> <!--div 태그가 끝났음을 의미-->
</body> <!--body 태그 끝-->
</html> <!--html 태그 끝-->
html에 사용되는 태그,마크업의 예
<img> 이미지를 삼입하는 태그
<span>, <p> 줄글을 작성하는 태그
<div> 보편적으로 사용하는 태그 (block 특징)
<ul> 불렛으로 리스트업되는 태그
<ol> 숫자로 리스트업되는 태그
<input> 안에 타입을 무엇으로 하느냐에 따라 많은 기능을 할 수 있는 태그 (예:아이디, 패스워드,제출, 옵션선택 등)이 외에도 무궁무진한 태그들..
CSS
html이 뼈대라면 css는 그걸 꾸며주는 살들. 투박한 html을 가독성 좋게, 디자인이 예쁘게 꾸며주는 역할을 한다.
html에 id나 class를 부여하여 css에 가져와 작성해주면 된다. html 태그에 id를 부여하였다면 #(id에 부여한 이름)을, class를 부여하였다면 .(class에 부여한 이름)을 넣고 {}괄호를 열어 꾸며주면 된다.
각각의 id나 class는 글씨 폰트 크기, 굵기, 모양, 자간, 행간, 밑줄, 가로줄, 정렬모양 등등 가지각색으로 꾸며줄 수 있다.
이런식으로 구성하였다면 각각의 박스들을 꾸며줄 수 있는데, 줄바꿈이 되는 박스가 있고, 안되는 박스가 있다. 줄바꿈이 되고 크기를 지정할 수 있는 박스는 block, 줄바꿈이 안되고 크기도 지정할 수 없는 박스는 inline이라고 불리는데, 이 중간의특징을 가지고 있는, 줄바꿈은 일어나지 않고 크기는 지정할 수 있는 inline-block 박스도 존재한다. (띠용)
줄바꿈이 되는 태그에는
<h1>, <p>가 있고, 줄바꿈이 되지 않는 태그에는
<span>등이 있다.
그런데 진짜 태그 작성할 때 이렇게밖에 못하나? 분명 같은 줄에 쓸 수 있는 방법이 있을텐데 아직 모르겠다. 진짜 그대로 날것의 블로그..
아무튼 span 태그에 css를 적용하려고 해도 적용되지 않기 때문에 display를 inline-block으로 변경해주고 원하는 디자인으로 꾸며주면 된다.
padding & margin
박스에 padding과 margin의 개념도 존재하는데 padding은 작성한 글과 박스 사이의 간격, margin은 박스와 다른 박스들 사이의 간격이다. margin은 박스를 감싸고 있는 버블이라고 생각하면 편하다. 오히려 헷갈릴라나? 이 개념을 이해하기까지 시간이 좀 걸렸는데 이렇게 생각하니까 난 편했다. margin을 크게 지정하면 박스들과의 사이가 커지고, 음수로 지정할 수도 있는데 이렇게 되면 가까워진다. padding과 margin의 단위는 px로 주는데, 사방면을 일관적인 크기로 지정하려면 지정하려는 크기 하나로만 써주고, 상하 좌우로 나누려면 상하 좌우 순서로 두 가지 크기를 써주고, 사방면 다 다르게 하려면 위, 오른쪽, 아래, 왼쪽 (시계방향) 순서대로 4개의 크기를 써주면 된다. 박스 크기, 테두리 색깔, 박스 안의 색깔, 바깥의 색깔 모든 것의 스타일에 대해 변화를 줄 수 있다.
이것이 오늘 정리한 것의 정리.. 인데 제목 저렇게 쓰면 코드스테이츠에서 고소할 수도 있다고 생각했다. (개구리게 써서) 나중에 적절한 제목이 생각나면 바꿀수도? 그리고 다른 블로그들도 참고해봐야겠다 어떻게 썼나. 나만 이렇게 의식의 흐름으로 쓴건지.. 진짜 무슨 말인지 나만 알아볼 듯.. ㅎ 너무 날것의 그대로, first draft를 만천하에 공개하는 느낌이다. 쓰기 전의 목표는 꾸준히 쓰는거였는데 쓰고 난 후의 목표는 꾸준히, 깔끔하게, 정갈하게로 바뀌었다. 전의 목표도 실행하는데 힘 좀 들 듯 ㅎ
코드가 맛있고 주인이 친절해요 '-'❤️