728x90
반응형
현재는 개인 과제 진행중이다
html을 이용하여 기본적인 뼈대 제작후 API를 이용해 영화 데이터를 넣을 예정이다
처음에 어떻게 하면 깔끔하게 칸을 나눌까 생각중에 <section> 요소를 사용하여 칸을 나누어봤다
<section class="card-list">
<div class="carbox">
</div>
<div class="carbox">
</div>
<div class="carbox">
</div>
<div class="carbox">
</div>
<div class="carbox">
</div>
</section>과제중에 스타일 코드가 너무 길어져서 코드 가독성이 너무 떨어지는 <style> 코드는 모두 넘겼다
.css파일로 넘어간 <style>코드들
CSS사용 방법은 생각 보다 간단했는데
1.작업폴더에 .CSS로 끝나는 파일 만든후 현재 작성중인 HTML 문서
<head>태그 안에 <link>태그를 넣은후 href라는 속성에 .css 파일 경로를 지정해놓으면 css사용할수있다
나는 같은 폴더에 만들었기에 따로 폴더명 까지 적지는 않았지만 다른 폴더에 만들었다면
EX) herf="다른폴더이름/아무이름.css" 이렇게 집어넣어주면 된다
2.HTML에 작성한 style 코드를 그대로 css파일로 옮긴다
작성시에는 꼭 .을 찍은후 {} 로 묶어준다
3.이용시에는 class 속성을 열고 클래스 이름을 집어넣으면 css파일 스타일 그대로 사용가능하다
클래스 는 중복으로 하면 안되기에 이름 작명시 주의 할것
내일은 API를 이용하여 데이터를 받아 직접 적용시켜봐야겠다 분명 한번 써본 코드인데도 막상 처음부터 직접 만들려니
많이 버벅거린다 계속해서 반복 숙달해야겠다
728x90
반응형
'Today I Learned (TIL)' 카테고리의 다른 글
| TIL (Today I Learned) 23.10.21 (0) | 2023.10.21 |
|---|---|
| TIL (Today I Learned) 23.10.20 (1) | 2023.10.20 |
| TIL (Today I Learned) 23.10.18 (0) | 2023.10.18 |
| TIL (Today I Learned) 23.10.17 (0) | 2023.10.17 |
| TIL (Today I Learned) 23.10.16 (1) | 2023.10.16 |
