[스파르타코딩클럽] 에서 진행한
2월 월간 맛보기 코딩인
인생사진 쏙쏙 코딩네컷을 공부해봤다.
기본 시간은 얼마되진 않지만
HTML,CSS에 관한 기초적인 학습과
페이지를 만들어 사진과 동영상을 기록할 수 있는
사이트를 만드는 것이다.
★HTML, CSS 기초학습★
- HTML : 웹사이트를 이루는 기본적인 틀로 <태그>로 이루어져 있다
해당 태그의 이름을 예시로 들었는데, <a>,<img>,<input>은 노란색 글씨인 href, src, type을 넣어줘어야하는데
이러한 부분을 '속성'이라고 불린다. 2% 부족한 태그의 기능을 채워주는 역할이다
ㅁ 선택자의 역할을 하는 단어
1) 단 하나만 존재하는 요소를 표현하기 위한 방법 → ID
2) 비슷한 종류의 요소를 묶어놓는 방법 → CLASS
- CSS : HTML 태그에 색칠을 하는 역할이다
★구조 잡기★
<body>
<div class="container">
<div class="photos">
<div id="image1" class="photo-frame">사진1</div>
<div id="image2" class="photo-frame">사진2</div>
<div id="image3" class="photo-frame">사진3</div>
<div id="image4" class="photo-frame">사진4</div>
</div>
<div class="footer">아래 영역</div>
</div>
</body>
1. 사진 영역에 이미지 설명 글(description) 넣어주기
- div 태그를 활용하면 된다
- 글자 태그는 보통 span 태그를 사용합니다
- 나중에 css를 적용하기 위한 id와 class 속성 기입, 잊지 말아야한다
2. 아래영역(footer) 만들기
- 현재 ‘아래 영역’이라고만 되어있는 부분을 꾸며봅시다!
- ‘paragraph’를 의미하는 p 태그 이용해서 만든다
<div class="footer">
<p class="f-title">Happy Lunch Time</p>
<p class="f-date">2023.01.23</p>
</div>
ㅁ body 태그 스타일링
/* body태그 자체에 css 요소 부여 */
body {
font-family: "LeeSeoyun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("./background.png");
}
font-family - 우리의 웹 사이트 전체에서 사용할 폰트를 정의
margin - 마진이 있으면 해당 컴포넌트로부터 바깥쪽으로 얼만큼의 영역이 남게 돼요(여유공간)
가운데정렬 옵션 - 전체 웹 사이트에서 코딩네컷의 영역이 가운데정렬
display: flex; /* flexible하게 보여줄건데 */
justify-content: center; /* 안에 내용물들을 가운데 정렬 해줘! */
수업이 길지 않고, 짤막하게 1시간 정도
집중해서 만들면 진행할 수 있다.
다만, 이미 만들어져 있는 것을 따라하다보니
안보고 할 수 있을지에 대한 의문은 든다
혼자서 할 수 있을 정도로
나만의 사이트를 만들어봐야겠다
'About Me > 회고' 카테고리의 다른 글
| [내일배움단] 비개발자를 위한, 웹개발 종합반 2주차 후기 (1) (0) | 2023.02.16 |
|---|---|
| [내일배움단] 비개발자를 위한, 웹개발 종합반 1주차 후기 (0) | 2023.02.12 |
| 2023 나만의 버킷리스트 만들기!!(Feat, 스파르타코딩클럽) (0) | 2023.01.31 |
댓글