이 강의를 접하게 된건 유튜브였다. 설연휴동안 무료로 알려주는 강의라고해서 흥미가 생겼다. 그렇게 들은 강의는 짧은 기간동안 빠르게 개념을 훑을 수 있어서 굉장히 좋았다. 웹페이지에대한 개념이 가시적으로 그려져서 앞으로 어떤 공부를 해야 할지도 배울 수 있었다. 듣기를 잘한것 같다.
⁋복습
HTML
우리가 보는 웹페이지들의 뼈대를 구성하는 언어.
HEAD부분과 BODY부분으로 구성되있음. 우리가 보는 내용은 BODY부분이고, 이를 구성하기 위해 필요한 것들이 HEAD부분이다.
HEAD 부분에는 CSS와 Javascrypt같은 언어들이 올 수 있다. 다만 너무 길어지면 보기 힘들기 때문에 다른 파일로 분리저장을 한다.
기본적인 태그
>h1~h6 : 글씨의 크기가 다른 태그들. 보통 제목으로 사용한다.
>a : 하이퍼링크를 넣을 때 사용한다. 속성에 href를 추가해주어야 한다.
>input : 값을 입력받는 태그
>button : 버튼을 만드는 태그
>div : 내가 원하는 태그들의 영역을 정할 때 사용하는 태그
>textarea : 글씨칸을 만들어주는 태그
다양한 태그들이 존재한다. 필요할 때 검색을 해서 찾아보아야 한다.
태그들을 좀더 상세하게 사용하려면 괄호 안에 속성들을 추가해주어야한다.
CSS
HTML을 꾸며주는 역할을 한다.
HEAD안에 style태그를 만들어서 사용하거나 다른 파일로 저장해서 사용할 수 있다.
꾸밀 수 있는 것과 예쁘게 꾸미는 것은 다른 영역이다.
'누구를','어떻게' 할 것인지 명확하게 적어야 한다.
'누구를'에 해당하는 방법은 3가지가 있는데, id태그, class태그, 그리고 html의 태그 그자체를 지칭하는 방법이다. ex)
<div class = 'name'> 이렇게 지칭된 부분을 명찰이라고 부르자.
style태그 안에서 명찰을 사용하기 위해서는 .명찰의 형태로 사용해야 된다. ex).name
명찰안에 여러 요소가 있고, 그 안에 특정 요소를 지칭하고 싶은 경우에는 꺽쇠를 이용해주면 된다. ex) .name > a
body같은 html의 태그나, *같이 전체를 가리키는 특정문자의 경우에는 앞에 .을 찍지 않아도 사용할 수 이싿.
태그들과 동일하게 내가 필요한 언어를 그때 그때 검색해서 사용하면 된다.
특정 동작을 하는 부분은 세트로 묶어져 있는 경우가 있다. 이럴 때는 이것들을 묶어서 생각하면 아주 좋다.
Java
웹페이지에서 동적인 움직임을 담당한다. (뒤로가기 버튼을 눌렀을 때 뒤로가거나 하는)
이번강의에서는 정확하게 배우진 않고 이런 느낌이다로 대충 넘어갔다. 나중에 배포가능한 페이지를 위해서 서버와 같이 공부해야할 부분이다.
그외 팁들
vscode에서 !와 !!!는 기본적인 탬플릿을 의미한다. 맨땅에서 시작하는 것보단 훨씬 편하게 해준다.
crtl+A(모든 코드 선택) 과 ctrl+K+F(선택 코드 정렬)은 좋은 콤비이다. (기억해둘 것)
구글 웹 폰트에서 폰트 가져오는 방법
-1.select를 눌러서 link코드를 복사한뒤 내 코드의 head부분에 붙여넣는다.
-2.css용 코드를 원하는 명찰에다가 붙여넣는다.
내가 만든 사이트(사실 그냥 따라하기만 한거라 내가 만들었다고 하기에는 그렇지만..)
https://new-year.spartacodingclub.kr/i2EP66ntpLuV/index.html