2024_12_10 화요일
코딩 2일차....
오늘은 정말로 캠프시작한 이래에 플젝기간을 제외하고 단연코 가장 힘든 날...
갑자기 어제에 대해 수업강도가 너무나 매워졌다.
너무 빨리 진행이되서 따라가기가 벅찬 하루였다...🥺
✅ 배운점
어제는 웹기술중 웹 페이지의 뼈대를 정의하는 HTML을 배웠고,
오늘은 웹페이지를 큐티하게 꾸며주는 CSS에 대해 배웠다.
CSS의 구조와 작성규칙을 예시상황으로 정리해봤다!
여기서 선택자(Selector)의 종류는 3가지가 있다.
1. HTML태그 이름을 선택하는 요소 선택자
2. 여러 요소를 한꺼번에 꾸밀 때 사용하는 클래스 선택자
3. 특정 요소 하나를 꾸미는 아이디 선택자
요 소선택자는 위의 CSS구조와 작성규칙예시와 동일하고,
클래스 선택자와 아이디 선택자는 <head>영역에서 정의한뒤, <body>영역의 원하는 곳에 속성처럼 적용 할 수 있다.
그리고 아래에 클래스 선택자와 아이디 선택자가 어떻게 사용되는지 정리해봤다!
독립 선택자는 한번에 여러 요소를 꾸미고자할 때 사용하고,
선택자를 콤마(,)로 연결해서 여러요소를 꾸밀 수 있다.
그리고 관계 선택자는
독립 선택자에서 선택자 간에 콤마(,)를 생략하면 부모-자식 관계로 해석된다.
여기서 부모요소는 다른 요소를 부모처럼 감싸고 있는 요소이고, 자식요소는 부모요소 안에 포함된 요소이다.
<!DOCTYPE html>
<html>
<head>
<title>부모-자식 관계</title>
<style>
.parent {
border: 2px solid blue; /* 부모 테두리 */
padding: 10px; /* 안쪽 여백 */
background-color: lightgray; /* 부모 배경색 */
}
.child {
border: 2px solid green; /* 자식 테두리 */
padding: 5px;
background-color: lightgreen; /* 자식 배경색 */
margin-top: 5px; /* 부모 안에서의 간격 */
}
</style>
</head>
<body>
<div class="parent">
부모 박스
<div class="child">자식 박스 1</div>
<div class="child">자식 박스 2</div>
</div>
</body>
</html>
그리고 부모자식 관계에서의 포지션은 이렇게 된다
특별한 상태일 때만 작동하는 CSS 스타일인 가상 클래스도 있다.
대표적으로는 마우스를 올렸을때 작동하는 :hover,
클릭하거나, 입력창에 포커스가 맞춰질 때 작동하는 :focus,
버튼을 누르고 있는 동안 작동하는 :active가 있다.
CSS는 세가지 적용방법이 있다.
1. 인라인 CSS : 태그 안에 직접 스타일을 쓰는 방법인데, 권장하지 않는 방법이다.
2. 내부 CSS : <style> 태그를 사용하여 <head>태그 안에 스타일을 쓰는 방법이고 모든 예시들에서 사용한 방법이다.
3. 외부 CSS : 별도의 .css파일을 만들어서 연결하는 방법이다.
모든 HTML 요소는 기본적으로 박스모양이고,
요소들이 서로 위에 놓여있는 박스라고 생각할 수 있다. CSS 레이아웃은 박스모델을 주 기반으로 하고있다.
CSS에서는 패딩값(내용과 테두리 사이의 간격)과 보더(테두리), 마진(박스와 박스 사이의 간격)을 설정할 수 있다.
그리고 백그라운드 컬러도 색상의 이름을 사용할 수도 있고, HEX CODE 와 RGB, RGBA로 설정이 가능하다.
백그라운드 컬러와 동일하게 글자색도 설정이 가능하다.
그리고 텍스트 얼라인도 왼쪽, 오른쪽, 가운데, 양쪽정렬로 맞추는 것이 가능하다.
🤔 느낀점
오늘은 진짜 처음에 말했 듯, 캠프를 시작한 이래로 가장 정신이 없는날이였고 그만큼 힘든 날이였다.
코딩 수업이 어제까지만해도 오~~ 약간 재밋는데? 이정도였다면,
오늘 급발진으로 너무 많이 매워져서 아....음....아...의 연속이였다.
그리고 강의 진행이 너무 빨라져서 어느순간 강의에서 소외당한 느낌이 들면서 약간 낙오 한것 같기도..?
그래서 오늘은 진짜 정보를 많이 습득하면 물리적으로 머리가 아파짐을 느낄 수 있는 하루였다...
그리고 강의가 끝나고 실습하는 시간에도 오늘 배운 CSS를 최대한 활동해보라고 하셨는데
너무 많아서 도대체 어디서부터...무엇을...해야할지 모르는 상황이였다..
어찌저찌 해내긴 했지만.. 조금 더 속도가 느려졌다면 이해를 더 했을 것같아서 아쉽긴하다
그리고 실습을하면서 가장 많이 느꼈던 감정은 '답답함'이였다.
피그마로 했으면 이렇게 옮겨서 도구를 클릭클릭하면 끝날텐데
코드로 쓰려니까 어디에다가 입력을 해야하고 또 어디에 적용을 해야하고 하는 과정들이 답답하게 느껴지기도 했다
코딩을 완벽하게 이해하기보다는 전체적인 구조를 이해하고 싶은데
어제의 강의속도는 완벽했으나 오늘의 강의속도로는 구조를 파악하는 것이 매우매우 힘들것같다...(나머지 공부 완전 필수...눙물...)
그리고 피그마로 작업을 할때의 네이밍이 얼마나 중요한지 코딩을 하면서 깨달았다
피그마 컨포넌트에서 지정한 네이밍이 거의 그대로 개발단계에서 사용된다는 말이 이제는 뭔지 조금 알 것 같다
그만큼 앞으로 피그마 작업시에도 네이밍을 많이 신경써야겠다는 생각을 했다....!
'[내배캠] 프로덕트 디자인 트랙 > [내배캠] TIL : Today I Learned' 카테고리의 다른 글
| [내배캠] 프로덕트 디자인 / 38일차 / 2024_12_12 (2) | 2024.12.12 |
|---|---|
| [내배캠] 프로덕트 디자인 / 37일차 / 2024_12_11 (0) | 2024.12.11 |
| [내배캠] 프로덕트 디자인 / 35일차 / 2024_12_9 (4) | 2024.12.09 |
| [내배캠] 프로덕트 디자인 / 33일차 / 2024_12_5 (0) | 2024.12.06 |
| [내배캠] 프로덕트 디자인 / 32일차 / 2024_12_4 (0) | 2024.12.04 |
