오늘 Wecode 부트캠프 1일차 이자 웹개발자의 길을 걷기 시작한지 1일차.
아직 실력이 많이 부족하여 많이 알지 못하지만, 잘 모르겠는건 멘토님분들께 물어보되 최대한 알아보고 구글링을 해보며 직접 찾아보는 습관을 들여야겠다는 생각이 든다. 열심히 한번 해보자....;
프론트엔드 멘토님인 준식님께서 팁을 주셨는데 개발을 처음 시작할때 우선 큰 그림을 그려줄 필요가 있다고 하셨다. 어렵거나 모르는 주제가 나오면 블로깅 해가며 학습하도록 하자.
HTMl의 정의와 기능
HTML은 웹페이지를 만들기 위한 언어이다.
HTML로 췝페이지의 구조를 잡을수 있습니다.
HTML파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.
브라우져는 HTML파일을 가지고 뭘 어떻게 그려주면 되늕 ㅣ파악한 후에 웹페이지를 생성합니다
프론트엔드 멘토님인 준식님께서 팁을 주셨는데 개발을 처음 시작할때 우선 큰 그림을 그려줄 필요가 있다고 하셨다. 이것을 인지하며 HTML과 CSS를 학습을 해보자.
HTML tag
1. rag , content
HTML에서는 이미지나 텍스트를 그려 주려면 그에 맞는 태그가 필요하다.
tag 는
<태그이름>내용</태그이름>
브라우져에서는 태그(tag)는 보여주지않 내용인 content 부분만 보여주게 된다.
대부분의 태그는 시작하면 꼭 끝맺음을 해야하지만 시작과 동시에 종료되는 img, br tag가 있다.
2. attribute 속성
속성은 시작 태그에 위치하면 한 tag에 여러 속성을 지정할 수 있다.
<div class="title">시작!</div> <a href="https://naver.com">네이버로 이동</a> <img src="./me.png" alt="내사진">위 태그 를 보면 div,a,img 는 tag dlrh class, href, src, alt 는 attribute 속성인 것이다.
3. element 요소
<태그이름> 으로 시작하여 </태그이름>으로 끝나고 tag 사이에 내용이 있느 구조를 요소라고 한다. 끝 태그가 필요없는 것은 tag가 그 자체로 요소가 된다.
CSS 의 정의
CSS란 HTML 태그들에 디자인을 입혀주는 것으로, HTML이 헤더, 문단, 테이블 등으로 정보를 제공한다면, CSS는 HTML을 디자인하여 스타일을 입히는것이다.
CSS 적용
CSS를 적용하는 방법에는 tag style 속성에 직접 작성하는 inline style방법과 HTML파일 내에 CSS를 작성하는 style tag방법있지만 이 두 방법은 HTML의 태그과 style 코드가 혼재 되어 유지보수에 좋지 않아 HTML과 CSS파일을 분리하여 작성하는 방법을 많이 사용한다.
대신 HTML에 어느 CSS파일을 쓰엿는지 링크를 추가해주어야한다.<link href="index.css" rel="stylesheet" type="text/css" />
CSS 작성법
디자인을 할 선택자를 지정하고, 어떤 디자인을 적용할지 작성한다.
p {
color: red;
}위 코드는 p 태그의 텍스트를 빨간색으로 바꾼다는 뜻이다.
class:
클래스에 디자인을 적용학고 싶을 때는 선택자에 .(dot)이 필요하다.
.class {
color: red;
}
id:
아래 코드는 id의 요소만 스타일이 적용된다.
#id {
color: red;
}