[TIL] html & css 공부

기본적인 html의 구조와 css를 공부하며 프론트엔드를 작성 중

새로운 기능이나 기억해둘만한 요소를 적어두자

 

 

 

---

 

 

 

id는 #     class는 .    그냥 태그는 아무것도 없는 상태로 css파일로 불러올 수 있다.

 

p { }

# class='box'
.box { }

# id='box'
#box { }

 

 

 

 

다른 class내의 요소를 태그로 불러올 수도 있다

 

<div class="box">
  <p> </p>
<div>

.box {#div에 속성 부여}

.box p {#div내의 p태그에 속성부여}

 

 

 

 

두가지를 함께 사용하여 div 혹은 태그 내  문자열을 가로 / 세로 정렬할 수 있다

 

justify-content: center;
text-align: center;

 

 

 

 

상위 div에 flex 설정이 되어있으면 

하위 요소들을 flex하게 가로로 나열할 수 있다.

 

.parent {
  display:flex;
}

.child {
  justify-content: space-between;
}

 

 

 

---

 

 

 

css로 한 줄에 들어간 text를  ... 표시로 가리기

 

white-space: nowrap;  # width 길이를 넘쳐도 한 줄로 표기하게 한다
text-overflow: ellipsis; # 끝나는 부분에 ... 을 표시 
overflow: hidden;  # width 보다 긴 요소를 숨긴다