[SeSAC] 웹 풀스택 과정_HTML/CSS

 

1주차 스스로 평가

 새싹x코딩온 영등포캠퍼스 5기 교육은 한주에 3회 월, 수, 금 강의가 있습니다. 사실 이 부분에 대해서 면접에서 다른 부트캠프와 비교했을 때 주 3회면 교육일이 적은 것 같기도 한데 혹시 이유가 무엇인지 물어봤습니다. 여태까지 기수를 운영하면서 효율적인 개인학습시간과 강의 시간의 비율을 조절한 것이라고 답변해 주셨던 게 생각나네요. 이번주를 돌아봤을 때 저는 강의 외에 개인 학습시간은 효율적으로 사용하지 못했던 것 같습니다. 수업시간에 과제로 주신 것 외에는 따로 자바개념 조금 공부한 게 전부네요.. 복습이나 예습도 많이 부족했다고 생각합니다. 그래서 이번주는 10점 만점에 5점...? 시작은 했으니까요..! 다음 주는 수업, 공부, 운동 스케줄을 잘 짜서 실행해 보고 다시 한번 스스로 평가해 볼 계획입니다.

 

 

HTML / CSS

이번주 2,3 일차에는 HTML과 CSS 개념과 실습 위주로 학습을 진행했고, 간략하게 기록을 남겨놓고자 합니다.

 

 

1. HTML은 뼈대 CSS는 꾸미기

 - HTML(Hypertext Markup Language)은 컨텐츠 구조를 정의하는 마크업 언어입니다.

 - CSS(Cascading Style Sheet)는 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어입니다.

 

 

2. HTML의 img 태그와 a 태그

 - img 태그 : 이미지 불러오기 (외부 링크, 로컬 파일)

 - a 태그 : 하이퍼링크 만들기 (외부 링크, 로컬 파일)

<a href="https://www.naver.com" target="_blank" title="마우스 커서를 올리면 나타남!">Naver로 이동하기</a>
<!-- target="_blank" 는 새탭으로 링크를 열어줍니다. -->
<!-- self : 기본값 : 현재탭 -->
<!-- blank : 새탭 -->

 

3. HTML의 Semantic 태그

HTML의 구조를 잘 알아볼수 있게 작성하기 위해 Semantic 태그를 사용합니다.

ex) div나 span태그는 태그 이름만 보고는 어떤 내용인지 유추하기 힘들지만 form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다. 따라서 같은 동작을 하는 HTML 코드라도 더 알아보기 쉽습니다.

 

Semantic 하게 작성 함으로써 오는 이점

  - 검색최적화(SEO) : 검색엔진이 HTML 코드를 분석해 사이트를 노출시키기 때문에, 사이트 노출에 영향을 줍니다. 이때 구성요소들을 적절하게 사용했을 경우 더 상위에 노출되도록 해줍니다.

  - 유지보수 : 구조를 알아보기 좀더 쉽기 때문에, 유지보수에 장점이 있습니다.

출처. 새싹x코딩온 교육자료

 

4. CSS의 작성방식

  - 인라인 방식 : 직접 적용할 대상 태그안에 적어줘야 합니다.

  - 내장 방식 : style 태그안에 미리 선언해 놓고 그걸 가져다 씁니다.

  - 링크 방식 : 하나의 css 파일을 만들고 html에서는 그걸 가져다 쓰는 방식입니다.

 

5. CSS의 선택자

CSS는 꾸미기! 꾸미려면 대상을 선택해야 하기 때문에 선택자가 필요합니다.

 

기본선택자

  - * : 전체 선택자

  - 태그명 : 태그선택자

  - .클래스명 : 클래스 선택자

  - #아이디명 : 아이디 선택자

 

이외에도 수많은 태그와 부여된 속성들 사이에서 원하는 것을 선택하기 위해 복합 선택자, 가상 선택자, 속성 선택자 등의 다양한 선택자들이 있습니다. 링크로 적은 사이트에서 간단한 퀴즈를 푸는 것으로도 선택자 연습을 해볼 수 있습니다.

 

선택자 연습 사이트

https://flukeout.github.io/

CSS Diner

 

 

 

마무리

사실 적은 것 외에도 HTML의 ul, ol, table CSS의 transform, overflowm, z-index 등 여러 태그와 속성을 실습해서 손에 익히는데 도움이 많이 됐습니다. 전부 다 기억하면 좋겠지만 저는 분명히 어느 정도는 잊겠죠..? 저는 최대한 제가 정리해 놓은 템플릿과 정보제공 사이트(ex MDN) 등을 잘 정리해 놓겠습니다!