1. HTML과 CSS란 무엇인가, HTML과 CSS JavaScript의 관계
> html이란 Hypertext Markup language 웹페이지를 만들 때 문서의 구조,틀을 잡아주는 웹언어 중 하나이다.
> Css란 Castcading Style Sheets의 약자로 웹 페이지에서 웹페이지가 어떠한 방식으로 화면에 표시될지 정해주는 언어이다.
> html은 웹페이지의 내용을 적어주는 언어, css는 웹페이지의 디자인을, javascript는 웹페이지의 동작을 담당한다.2. HTML에서 자주 쓰이는 태그 종류
> 기본 구조 : html으로 작성되었음을 알려주는 <html>태그, html의 정보들을 입력하고 알려주는 <meta>태그, 웹페이지의 이름을 정해주는 <title>태그, html의 본문이라는 뜻의 <body>태그등이 html의 기본구조를 잡아주는 태그등이 있다.
> 내용 입력 : 내용을 입력하고 구조를 잡을 때 구조를 잡는 것을 도와주는 <div>태그가 가장 많이 쓰이는 태그 중 하나이다.
본문내용을 입력하는 태그인 <P>태그가 있고, <p>태그는 한 줄 띄워주는 태그인 </br>태그가 없어도 자동으로 줄이 바뀐다.
<span>태그는 본문내용을 입력하는 태그 중 하나이지만 </br>태그가 없어도 줄을 바꾸지 않고 횡으로 계속이어져서 써진다.
리스트를 표현할 때는 <ul>태그 <ol>태그 <li>태그를 활용해서 문서를 작성한다. <ul>태그와 <ol>태그를 부모태그로 그 밑의 자식태그
<li>태그를 작성해 주는데, <ul>태그는 정렬되지 않은 리스트로 각각의 리스트들을 점으로 보기좋게 정렬해주고 <ol>태그는 정렬된 리스트로 각각의 리스트들 앞에 숫자로 번호매김해 준다.
제목태그들은 <h1>태그 부터<h6>태그가 있고 이 h1이 가장 중요한 제목이자 가장 크게 표현을 해주고 숫자가 커질 수록 태그 안의 내용이 표시될 때 작아진다.
> 동작표현 : 텍스트를 사용자에게 입력할 수 있게 해주는 <input>태그, 버튼을 만들어주는 <button>태그 제출양식을 정의하는 <form>태그 <legend>태그 <fieldset>태그들도 자주 쓰인다.3. .html파일과 .css파일을 연결시킬 수 있다.
> html페이지 안에 <style></style>태그를 작성하고 이 태그 안에다 css코드를 작성하면 html에서 css를 자동으로 적용시킨다.
> <link rel="stylesheets" href=".css파일 주소링크" />를 입력하여 css파일을 따로 작성 한 뒤 html에 불러올 수도 있다.4. CSS의 다양한 스타일 속성, HTML 요소에 적용하는 방법
> css를 적용하고 싶은 html의 태그를 css페이지에 적어서 적용할 수 있다. 하지만 같은종류의 태그들이 너무 많이 쓰이는 html의 특성상 태그만 적는다면 내가 css를 적용하고 싶은 태그가 어떤 태그인지 명확하게 인식하지 못하는 경우가 생긴다.
> 이 문제를 해결하기 위해서 html의 태그 옆에 id나 class등의 셀렉터들을 부여하고 그 셀렉터들을 css에서 불러와서 내가 적용하고 싶은 태그들에만 적용할 수 있게 해준다.
> 태그에 셀렉터를 부여한 예시
예시1) <p class="wecode1">내용 블라블라</p>
예시2) <p id="wecode-prestudy">내용 블라블라</p>
> css에서 셀렉터들을 불러온 예시
예시1) p{width : 60px;} // 태그만 불러옴
예시2) .wecode1{display : inline-block;} // 앞에 . 을 붙여 class를 불러옴
예시3) #wecode-prestudy{font-weight : 700;} // 앞에 #를 붙여 id를 불러옴
> css를 적용할 때 ,를 사용하여 여러가지 태그들을 함께 불러올 수도 있고 html상의 부모에 해당하는 태그들과 자식, 자손태그들을 함께 사용하면 내가 원하는 셀렉터를 명확히 불러올 수 있다.
> 만약 여러가지 태그들이 겹쳐 적용시킨다면 나중에 적어준 명령들을 우선적으로 반영.만약 셀렉터들을 부여했다면 !important(가장 우선순위 높게 css를 적용함) > #id > .class > 일반태그 순으로 우선순위 높게 css를 적용한다.
5. 배운 개념을 활용하여 자기 소개 페이지를 만들 수 있다.
6. .js파일을 연결하는 방법
> html파일에 .js파일을 연결하는 방법은 css와 마찬가지로 <script></script>태그를 작성한 후에 바로 코드를 작성해도 되지만
<script src="파일명.js"></script>로 .js파일을 불러올 수 있다.
Front-end Developer