AI 웹개발반/HTML & CSS
[TIL] html & css 공부
째깍단
2023. 6. 13. 17:04
기본적인 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 보다 긴 요소를 숨긴다