💡 12/27 - OT
눈떠보니 10시 O..O 편도 1시간 거린데…
이전에 밤낮이 아예 바뀐 생활로 인해 불상사가 발생했다.. (아찔)
진짜 호다닥 바로가서 11:20분 쯤 도착했다…ㅎ
도착하니 마니또 뽑기와 자기소개가 진행되었고,
나중에 듣기로는 앞부분에 출첵 방식, 스터디 지원 등에 대한 설명을 해주셨다고 했는데 못들어서 나중에 여쭤봐야 할 것 같다.
다행히 OT날에는 수업은 나가지 않고 에디터 설치 등 환경셋팅과 간단한 Git 사용법을 알려주셨다.
5시까지일줄 알았는데 1시반쯤에 끝내줘서 일찍 집에 돌아갔다.
💡 12/29 - HTML
이날부터 본격 수업 시작이었다.
이날은 도시락을 싸왔는데 점심 식권(8000원) 지원이 된다는 걸 점심 먹을 때 쯤 알게되었다ㅠ
다른 지원금은 없지만 식권이 제공되니 조금 부담이 줄었다🤗
수업이 어떤식으로 진행될지 매우 기대가 됐는데,
HTML 태그와 용법에 대해 아주 꼼꼼히 알려주시고 모든 내용을 따라하고 혼자 실습 문제도 풀어보면서 익힐 수 있어서 유익했다.
이전에 다른 교육에서는 HTML, CSS를 반나절만에 끝내서 정말 어렵게 어렵게 따라갔는데 하나하나 설명을 듣고 직접 해보는 시간이 있어서 이해가 잘 됐다.
(두 수업의 장단점이 있지만 그래도 지금 당장 이해가 잘 되니 좋았다 ㅎ)
오전에는 기본 태그들을 학습했다.
익숙한 태그들을 보니 반갑기도 해서 재미있게 수업을 들을 수 있었다.
HTML은 Hyper Text Markup Language의 약자로 구조화 하기 위한 언어다.
(HTML과 CSS는 프로그래밍 언어가 아니라고 하는 의견이 아주우우 많다!)
수업 내용을 요약하자면
[📝 학습한 내용 요약]
- HTML 문서는 반드시
<!DOCTYPE html>로 시작하며, HTML5를 쓰겠다는 선언이다. (확장자를 .html로 만든 문서에서! + ‘enter’로 HTML 기본코드 자동완성)<ul>,<ol>,<input>등의 태그는 type 속성이 다양하니 사용 시 잘 활용할 수 있으면 좋을것같다.<a>태그 안에<img>태그를 넣으면 이미지 클릭 시 페이지 이동 가능한데,target 속성을 설정하면 기존 or 새로운 탭에서 오픈하는지 선택할 수 있다.<input>과<label>태그를 사용할 때, 명시적 작성법 사용을 권장한다.
⭐명시적 작성법 :<input>의 id와<label>의 for속성을 맞춰서 grouping 해주는 것- 여러
<input>태그 사용 시, 용도에 맞게name 속성(checkbox, radio 등)을 채워서 grouping 해줘야 서버에 어떤 역할인지 알려줄 수 있다.<table>태그의cellspacing=”0”(테두리 한 줄 처럼 보임),cellpadding,colspan & rowspan(셀병합) 도 학습했다.
직접 실습하면서 어떻게 셀병합 되는지 직접 해볼 수 있어서 더 이해가 잘 됐던 것 같다.
이 외에도 배운 내용이 많은데 좀 더 자세한 내용은 노션에 정리해 두었다.
각 태그에 많은 속성과 설정이 있으니 태그를 쓸 때 어떤 것들을 활용할 수 있는지 한 번 씩 찾아보면 좋을 것 같다.
💡 1/3 - CSS(1) : 선택자, 속성
이전 시간에 다 못나간 시맨틱 태그에 대해 이전에 빠르게 진도 나가고
CSS를 시작했다.
[📝 학습한 내용 요약]
CSS는 Cascading Style Sheets의 약자로 웹페이지를 꾸미기 위한 언어이다.
CSS 적용 우선순위 : 인라인 > style 태그 or link 태그
좀 더 자세히 써보자면
!important > 인라인 속성 > id 속성 > class 속성 > 태그 선택자 > 상속으로 스타일을 선언한 경우
왼쪽에 있을 수록 우선순위가 높다!
우선순위 참고 자료복합선택자
- 하위(후손) 선택자 : '띄어쓰기'로 구분 ex) `div .orange{}`
- 인접 형제 선택자 : '+' ex) `.orange+li{}`
- 일반 형제 선택자(모두 선택) : '~' ex) `.orange ~ li{}`
가상 클래스 선택자 - 사용자의 행동에 따라 변화하는, 가상 상황에 따른 요소 선택 시 사용
::hover,:active - 클릭하는 동안,:focus,:first-child,:last-child,:nth-child(n|2n|n+2 등),:not(span) - span이 아닌 요소 선택가상 요소 선택자 - 선택된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자
:::after,::before- 반드시 content 속성 사용, 빈 값("")이라도 넣어야 적용됨
ex)p::before { content: "앞!" }:<p>앞에 "앞!"이라는 content 추가속성 선택자 : 태그의 특정 속성을 선택하는 선택자
ex)[disabled] {},[type="password"] {}
💡 1/5 - CSS(2) : box, position, background, flex
[Tip]
배경 그라데이션
:background: linear-gradient(white, orange);텍스트 세로 기준 중앙 정렬
:line-height: (height와 같은 px로 설정);
[막혔던 점]
실습하면서 막혔던 것들을 정리했다.
1. header 만드는 과제
: 3줄의 header를 만드는 과제 중,
첫 번째 header에는align-items: center;로 세로축 중앙정렬이 됐는데 그 아래줄의 2, 3번째 header는 이 효과가 안먹혔다.
<header>에line-height를 이용해 해결했다.
2-1. background 과제(인스타 프로필 사진)
: 사진을 원형으로 만들기 위해border-radius: 50px로 설정했는데 원이 되지 않았다.
=>border-radius: 50%로 동그라미 모양 구현!
2-2. background 과제(인스타 프로필 사진)
: 두 요소(div로 원 두 개 만듦)가 겹쳐지지 않았다.
=> 두 요소가 형제관계였다. 부모관계로 바꿔서 부모 요소에position: relative;, 자식요소에position: absolute;로 했더니 겹쳐졌다.
3. transform 과제
: 요소들을 화면 중앙에 위치시키고 싶어서justify-content: center;align-items: center를 줬는데 적용이 안됐다.
=> html, body 태그의 width, height를 100%로 하고 .container에display: flex;를 적용한 뒤height: 100%해준 뒤 justify와 align 효과 주면 된다.
[📝 학습한 내용 요약]
box-sizing
- content-box : 요소의 내용(content)으로 크기 계산
- border-box : 요소의 내용 + padding + border로 크기 계산
: 요소의 크기 지정했을 때 (width: 100px,hegith: 100px)
content-box는 100+pading+border,border-box는 content+padding+borderopacity(투명도)
: 요소를 숨기는 3가지 방법
- display: none;
- visibility: hidden;
- opacity: 0;
overflow
: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성
- hidden: 내용 잘림
- auto: 자동 맞춤
- scroll: 내용이 없어도 스크롤 보임
- visible: 항상 보임
position : 어디에 배치시킬 건지 기준점을 정하는 속성
- static: 기본값(생략 가능)
- relative : 자기자신을 기준(원래있던 위치 기준)으로 움직임
문서의 흐름을 해치지 않는다. 아무리 이동을 해도 배치 전 자리는 비워져 있음- absolute : 위치상 부모(위치값을 가진 부모,static이 아닌 부모)요소를 기준으로 움직임
absolute로 설정하면 원래 자기 자리가 없어짐 만약 바로 위의 부모가 static이면 그 윗 부모 기준으로 움직임 (먄약 모든 부모가 static이면 뷰포트(브라우저) 기준으로 움직임!)- fixed : 뷰포트를 기준으로 특정 위치에 배치되어 스크롤을 따라 움직임(부모와 상관 없음)
- sticky
요소 쌓임 순서(Stack order)
: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
z-index(position: static인 경우는 적용되지 않음!!)⭐⭐⭐flex⭐⭐⭐
이전에 정리한 내용이 있어서 링크를 걸어두겠다.Transform : 요소의 변환 효과를 주는 속성
순수 CSS를 잘 하고 싶다는 생각이 평소에 있었는데 많이 실습할 수 있었다. 특히 그리드, 레이아웃 이런쪽을 다루는게 까다롭다고 생각하는데 이 날 배운것을 잘 정리해서 활용할 수 있도록 해야겠다.
