[패스트캠퍼스] 프로그래밍 기초 강의 학습후기 2주차 - 2022. 8. 16. 22:13 작성글

2주차 강의는 HTML 로 웹 사이트 뼈대 만들기 마무리 시간과 CSS를 이용하여 웹 사이트 색칠하기 과정이었다.

HTML 인라인 요소와 블럭요소, 구획과 시맨틱 요소, HTML 폼 사용하기로 HTML소개의 마지막 강의가 이루어졌고

CSS 선택자부터 기본스타일,레이아웃,material 디자인 등으로 구성되어 있다.

 

 

HTML inline 요소와 block level 요소

: inline 요소와 block level 요소, 두가지가 혼합된 inline-block요소에 대해 공부했다.

inline요소는 내용물에 따라 크기가 정해지는 특징이 있고 block level 요소는 크기가 이미 정해져있는 것, 두가지가 혼합된 inline-block요소는 크기는 내용에 맞추지만 여백,크기,높이가 조절가능한 특징이 있다.

 

각 요소별 특징과 태그에 대해 공부했는데 그 뒤의 실습에서도 이어지는 내용이라 아직 태그만 보고 이게 inline요소인지 block level 요소인지 inline-block요소인지 모르겠다.ㅠ 익숙해지면 태그만 보고도 구분이 가능하려나...

 

 

HTML 구획과 Semantics 요소

: 단순히 다른 요소들을 묶거나 구획을 나누는 데 사용되는 구획 요소 <div> 와 이를 대체하는 Semantics 요소에 대해 공부했다.

Semantics 요소는 역할이나 용도는 <div>와 같으나 각 구획의 용도나 내용의 의미가 부여되어 있다. 

 

단순하게 화면상으로 보여지는 시각적으로는 차이가 없으나 왜 굳이 복잡하게 구분하나 했는데 사용자에게 편의성을 제공하기 위함이었다. 검색엔진에서 분석용도로도 사용할 수 있다고 하는데 그보다는 시각장애인 등 다양한 사용자들의 편의성에 맞춰진 느낌이다. 

 

HTML 폼 사용하기

: 구글 폼에서 익숙하게 보았던 폼 형식을 구현 하기 위한 요소에 대해 공부했다.

 

실습 예제 폼

모바일에서도 폼 형식을 작성할 때 숫자로 작성해야 하는 부분을 누르면 숫자키패드로 변환된다든지, 패스워드를 입력하는 부분에서는 패스워드 입력 후 입력된 패스워드가 * 등의 형식으로 가려져 보이는것을 설정하는 요소에 대해 배웠다. 초창기의 폼 형식에서 계속해서 사용자의 편의성에 맞추어 수정되어 왔을 것으로 생각되는데 구글 폼형식을 실제로 내가 만드는 느낌이라 신기했다. 

사실 이전 회사에서 구글폼을 자주 사용해서 그런지도.. 구글 폼을 설정할 떄도 전화번호 입력 칸에 숫자로 특정 양식으로만 작성하도록 하는것을 그 당시에는 구글에서 검색해서 태그로 붙여 넣었던거 같은데 이런의미를 가진 태그였구나 싶었다.

폼 양식을 끝으로 HTML은 마무리 되었고 CSS에 대해 배우게 되었다.

 

---

CSS 소개와 사용 방법

: 웹 사이트를 HTML로도 꾸밀 수 있지만 일반적으로 CSS로 분리해서 꾸미는 것이 권장된다. 설계는 HTML로 디자인은 CSS로!

파일을 별도로 분리하여 CSS 파일을 만들고 CSS 요소는 CSS 파일에 적용하는 것이 권장된다. vs code에서 같은 폴더내에 css파일을 만들고 html파일에서 css파일 불러오는 것부터가 신기했다. 이렇게 별도로 분리하니까 디자인 수정은 CSS파일에서만 하면 되고 설계 수정은 HTML에서만 하면 되니 편리하고 태그 구분하기도 쉽다.

 

CSS 선택자

: head 내 style 태그 또는 분리된 파일에 적용 시 사용.

선택자의 종류로는 tag 선택자, class 선택자, id선택자, attr 선택자가 있다.

tag 선택자는 문서 내 지명된 모든 태그에 적용하고, class 선택자는 문서 내 다수 요소에 동일하게 적용될 수 있는 class 속성에 따라 적용된다. id 선택자는 id 이름답게 문서 내 유일한 요소에 적용될 수 있는 id 속성에 따라 적용된다. attr(속성) 선택자는 태그의 속성과 그 값에 따라 적용된다

 

우선순위는 inline 스타일 > id 선택자 > class 선택자 > 태그 선택자 순이다.

구체적일수록 높은 순위이고 같은 우선순위라면 더 아랫줄에 오는 것이 덮어 쓴다.

 

결합자

: 자손결합자,자식결합자,인접형제결합자,전체선택자가 있다.

자손결합자 : 내부 모든 요소들을 선택 (빈 공백으로 자손 요소들을 선택) 예시) .outer div

자식결합자 : 바로 안 단계의 요소들을 선택 (빈 공백이 아닌 > 을 넣어준다) 예시) .outer > div

인접형제결합자 : 바로 안 단계의 요소들을 선택(바로 다음 요소)

전체선택자 : 모든 태그에 적용

 

psudo(가상) 클래스

: 부정가상클래스, 순서관련가상클래스, 마우스오버 가상 클래스가 있다.

마우스오버 가상 클래스는 특정 버튼에 마우스를 올려 놓았을 때 색이 변하거나 설명문이 나오는것을 설정할떄 사용한다.  

 

CSS 기본 스타일

: 글꼴,글 관련 스타일,상자형태 스타일을 배웠다.

글꼴은 구글 폰트에서 다운 없이 사용 가능하다고 배웠는데 막상 구글 폰트 홈페이 들어가니까 다운받는 방법밖에 없던데 이부분은 실습코치한테 문의해봐야겠다. 글꼴이나 글 관련 스타일은 용어가 그다지 어렵지 않았는데 상자형태 스타일은 일단 영단어부터 익숙치가 않았.. ㅠㅠ 나만 안익숙한가..

margin은 바깥쪽 여백, padding은 안쪽 여백, border-radius는 둥근 모서리 이정도만이라도 잘 기억하고 있어야 겠다.

각 요소별 속성에도 용어가 많아서 일단 혼란스럽.....ㅠㅠ 속성을 안보고 적용은 절대 못할거 같고 일단 보면서 적용하는 연습해가며 익숙해지도록 노력해야겠다.

 

CSS 레이아웃

: position 위치관련 스타일, display 요소를 보여주는 방법에 대해 공부했다.

배우기 전까지는 몰랐는데 각 구획별 위치 공간을 화면크기에 따라 고정시킬것인지, 변화시킬것인지 또는 상단의 메뉴바처럼 스크롤에 상관없이 고정시킬것인지도 정해야 하고 어떤 요소는 화면에서 아예 숨길것인지 아니면 클릭은 할 수 있도록 숨길것인지 이처럼 디자인적으로 고려해야할 부분이 많구나라는 것을 느꼈다.