1002 TIL

kimhr08·2021년 10월 2일
0

html+css 독학

목록 보기
2/5

HTML과 CSS에서 알아두어야 할 것들

HTML 알아보기 💻

  1. 가급적 이미지는 SVG를 사용한다.
    용량이 가벼우면서도 벡터 이미지이기 때문에 해상도가 아무리 높아져도 선명하게 보이는 강점을 가지고 있습니다. (특히 아이콘 같은 이미지라면 적극 사용 권장)
  2. 이미지 사이즈를 실제 적용할 사이즈보다 1,5배~2배 크게 저장한 다음에 줄여서 사용한다.
  3. 웹사이트 속도를 최적화하기 위해 해상도에 따라 다른 이미지를 보여준다.
<picture> 태그 - 
<img>요소의 다중 이미지 리소스를 위한 
컨테이너를 정의할 때 사용합니다. 화면의 해상도 또는 브라우저 화면의 
폭 너비에 따라 다른 이미지를 표시할 수 있다.
<picture> 요소는 0개 이상의 <source> 요소와 하나의 
<img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 
가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.

(예시)
<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>
<figure>태그 -
책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개됩니다.
figure 요소는 이처럼 사진,도표,삽화,오디오,비디오,코드 등을 담는 컨테이너 역할을 하는 태그이고,
figcaption요소는 이에 대한 설명하는 문구를 담는 태그 입니다
figcaption요소는 선택적이며, figure요소 안에 사용합니다. (내용 앞 뒤로 올 수 있음)
figcaption요소는 figure요소에서 한 번만 사용할 수 있으며
figure안에는 여러가지의 자식요소(img,code 등)을 포함할 수 있습니다.

(예시)
<article>
<h3>cheetah</h3>
<p>Cheetahs have adorned the courts kings,queens,and empero...
</p>
<figure>
<img src="cheetah.png" alt="cheetah">
<figcaption>지구별 동물원의 치타</figcaption>
</figure>

</article>

figure과 figcaption은 둘 다 block요소입니다.

  • figure과 aside 차이
    내용이 단순히 관련돼(느슨하게)있고, 필수적인 내용이 아니면 aside
    내용이 직접적인 관련이 있지만, 문맥상 그것의 위치가 중요하지 않으면 figure

참조-https://aboooks.tistory.com/358

레이아웃을 위한 <div>, <span> 태그

<div>는 기본값으로 너비를 100% 가지고 있는 것이 특징입니다. 높이와 너비를 지정할 수 있지만 div는 해당하는 줄을 혼자서 독차지하려는 특성을 가지고 있기 때문에 div를 여러 개 만들고 너비를 30% 지정한다 해도 각각의 div가 한 줄에 붙는 것이 아니라 너비가 30%인 채 한 줄씩 해당 영역을 차지합니다.

<span> 한줄에 객체를 이어 붙일 때 쓰이는 태그입니다. 기본적으로 영역을 가지려는 속성이 없습니다. 그래서 너비와 높이를 지정해도 적용되지 않고 오롯이 span 안에 속한 콘텐츠, 즉 텍스트나 이미지 사이즈에 따라 span의 사이즈도 정해집니다. 계속 이어서 붙일 수 있는 특징을 가지고 있습니다.

그래서 보통 div는 공간을 나눌 때 자주 사용되고, span은 담고 있는 콘텐츠의 사이즈를 가늠할 수 없는 경우에 유용합니다.

선택자

id는 딱 한번만 사용해야 할 때, class는 여러 번 사용될 때, 이렇게 구분 지어 놓고 사용하는 것도 좋지만, 대부분은 calss만 사용하셔도 무관합니다. 한 번만 사용될 것 같아서 id로 지정해놨는데 추후에 다른 곳에서 쓰일 사능성이 있다면 변경하는 것이 번거롭고, class도 규칙을 잘 정리해 놓으면 class만으로도 충분히 요소들이 혼합되지 않게 구분해서 스타일을 정의할 수 있기 때문입니다.

CSS 알아보기 💻

CSS는 중첩이 가능하다.

<div class="hello1">안녕하세요.</div>
<div class="hello2">안녕하세요.2</div>
<div class="hello1">안녕하세요.3</div>
<div class="hello2">안녕하세요.4</div>
<div class="hello1 text_bold">안녕하세요.5</div>
<div class="hello2 text_bold">안녕하세요.6</div>
<style>
	.hello{
	color:gray;
	}
	.hello2{
	color: blue;
	}
	.text_bold{
	font-weight:bold;
	}
</style>

이렇게 하면 마지막 2줄은 색도 입혀지면서 글씨가 두꺼워지기까지 한다.

class(.) 보다는 id(#)로 지정해 준것이 우선순위가 더 높습니다.
프로그래밍은 일반적으로 위에서부터 아래로 순차적으로 내려오기 때문에 위에서 쓰인 속성이 똑같이 아래에 쓰인다 했을 때, 두 번째 나온 속성이 위에서 쓰인 속성을 덮어씌우게 됩니다.

block과 inline

앞서 배운 태그들에는 css 속성이 기본적으로 적용되어 있는 것들이 있습니다. 예를 들어, <div>는 display가 기본적으로 block으로 설정되어 있고, <span>태그에는 display가 inline으로 설정되어 있습니다. 따라서 이를 강제적으로 변형하면 <div>태그를 <span>처럼 사용할 수 있고 반대로 <span>을 <div>처럼 사용할 수 있기도 합니다

  • 태그는 css를 이용해서 용도를 변경할 수 있으므로 태그를 사용할 때 어떤 태그를 사용할지 너무 고민하지 않아도 됩니다.

inline-block
inline-block은 앞서 말한 inline속성과 block속성을 둘 다 가지고 있는 중간 속성
버튼들을 나열한다고 가정했을 때, 한 중에 여러 콘텐츠를 넣을 수 있는 inline 속성에 버튼 사이즈를 지정할 수 있도록하는 block 속성이 둘 다 필요합니다. 이런 경우엔 inline-block으로 지정하면 특정 사이즈를 지정하면서도 block처럼 한줄의 전체너비 공간을 차지하지 않도록 설정할 수 있습니다.

inline-block 속성은 공간을 분할하는 데에도 유용합니다.
하지만 자주 쓸 때 주의해야 할 점은, inline-block 사이에는 의도치 않게 4px 정도의 작은 간격이 생긴다는 점.
이를 방치하기 위해서 부모로 감싸있는 div에 font-size:0px로 지정하면 여백이 없어지게 됩니다. 폰트 사이즈를 조정하기 애매한 상황이라면 flex속성을 통해서 공간 분배를 하는 것을 권장

inline 속성으로 되어 있는 태그들은 width와 height를 지정해도 적용되지 않습니다.

overflow

코드를 구성하다 보니 실수로 자식 엘리먼트가 부모 엘리먼트의 영역보다 커서 의도치 않게 넘어가는 경우가 많습니다.
이 때, 자식 엘리먼트가 부모 엘리먼트 영역을 넘어가지 않도록 돕는 설정이 overflow 입니다. hidden이라고 설정해 주면 넘어간 부분을 잘라주어서 보다 깔끔해집니다.
**웹사이트를 구성하다 보면 의도치 않게 width가 화면 너비보다 넓어져서 가로 스크롤이 생기는 경우가 가끔 있는데, 이럴 때 overflow를 이용하면 의도치 않은 가로 스크롤을 쉽게 제거할 수 있습니다.

relative , absolute

relative가 먼저 absolute가 뒤

position 속성은 정말 필요한 부분에서만 사용하기를 권장

box-sizing:border-box를 기본적으로 설정해주는 것이 좋음

font-family

body{
	font-family: 'Roboto','Noto Sans KR', sans-serif;
    }

폰트를 다중으로 지정하는 이유는 폰트 적용의 우선 순위를 정해서 사용자 환경에 따라 폰트가 일시적으로 이상이 생겼을 때(갑작스럽게 해당 웹폰트 다운이 안 된 경우) 다른 폰트로 대체하기 위함힙니다. 예제처럼 영문 폰트(Roboto)를 앞에 써주고 한글 폰트를 뒤에 써 주면 홈페이지 내 영문에는 우선적으로 Roboto가 적용되고, 영문 폰트는 기본적으로 한글을 지원하지 않기 때문에 그다음 순서인 Noto Sans가 적용되도록 지정할 수 있습니다.
제일 뒤에 sans-serif를 쓴 이유는 앞서 말한 대로 앞의 폰트들이 어떠한 이유로 폰트에 이상이 있어서 적용이 안 될 경우 사용자가 가진 폰트 중에서 sans-serif인 폰트를 적용하라는 명령어 입니다.

큰 폰트를 사용하는 경우 'vw'라는 단위를 사용합니다.

Letter-spacing

일반적으로 디자인 툴에서는 regular, light, bold, extra-bold를 많이 사용하지만 웹에서는 200(light), 400(보통 레귤러를 뜻함), 600(bold) 식으로 각각의 수치를 정확하게 입력하기도 합니다. 또한, 문자 regular, light같은 문자열에는 작은따옴표가 들어가고 숫자를 입력할 때는 따옴표가 안 들어가는 점 주의하기 바랍니다

디자인을 위해 폰트 사이즈를 11px 이하로 사용해야 하는 경우는 보다 신중하게 접근해야합니다. 폰트에 따라 12px이하, 혹은 이보다 큰 사이즈에서 뭉개져 보이는 폰트도 있습니다.

flex

flex를 이용하면 display:flex하나만 입력하는 것으로도 해당 엘리먼트 안에 있는 모든 요소가 똑같은 가로 너비 비율로 레이아웃을 나눕니다.
flex:initial - flex 속성을 지워주는
**flex-direction을 column(세로로 변환한다)으로 설정하면 수평으로 나뉜다.

flex를 사용하면 'align-items:center'를 통해 쉽게 수직 가운데로 맞출 수가 있습니다.
'justify-content:center'를 하면 수평 가운데로 맞출 수가 있습니다.

오늘은 여기까지..! 내일은 자바스크립트 공부!

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글