HTML

html,head,body - 옵셔널 태그

html 코드 작성시 무조건 사용할 필요는 없음
(하지만 코드를 깔끔하게 정리하기 위해 사용할 예정)

a태그(Anchor) - 하이퍼링크 태그

<a href="가고싶은 주소", target="_blank">내용

(target="_blank" - 링크된 페이지로 넘어 갈때 새 페이지로 이동

같은 폴더내에 파일로 링크를 걸 경우

'가고싶은 주소' 자리에 링크를 걸고 싶은 html 파일을 넣어주면 된다.

하위폴더로 링크를 걸 경우에는 "/"로 구분

ex) < a href="Folder1/page1.html">page1< /a>

상위 폴더로 돌아가고 싶은 경우 "../"를 적어준다.

(만약 두단계 위의 상위 폴더로 돌아가고 싶은 경우에는 "../"를 두번 적어주면 된다.)

이미지 삽입하기

img src="링크" width="숫자"
width는 이미지의 크기를 조절하기 위해 사용한 태그

div - 요소들을 묶어 주는 태그

코멘트

html 코멘트 → !-- --
css코멘트 → /* */

코멘트는 사실 브라우저가 무시하기 때문에 실제 결과물인 사이트에 반영이 되지 않습니다. 하지만 복잡한 부분들을 설명함으로써 지저분해 보일 수 있는 코드를 정리해 주는 역할을 합니다. 그리고 동료 개발자에게 설명을 해줄 때 에도 코멘트를 남겨 놓는 것이 편합니다.

CSS

class태그와 id태그

class

코드에서 중복으로 들어가 있는 부분에 전체적인 효과를 주기보다는 그 한 부분만 주기위해 사용하는 코드 "."을 찍은뒤 클래스 이름을 적어주고 설정 후 효과를 주고 싶은 태그 옆에 적어 주면 적용 가능

ex) .big-blue-text{
font-size: 64px;
color: blue;
}
< h1 class="big-blue-text">

여러 태그를 사용하기 위해서는 띄워쓴 후에 적어 주면 여러개 사용 가능하다.

Id태그

class 태그와 사용하는 방법은 똑같지만, "."대신 "#"을 찍는 것이 다르다

class태그와 id태그의 차이

같은 class의 이름을 여러 요소가 가질 수 있지만, 같은 id를 여러 요소가 공유할 수는 없습니다.

한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다.(단, 한 요소가 클래스도 여러개 갖고, id 하나 가질 수 있습니다.)

css스타일 적용 방법

1. < style>< /style>에 내용을 입력하는 방법

2. css파일을 따로 만들어 링크를 거는 방법

link href="css/style.css(css폴더에 있는 style이름을가진 css파일 rel="stylesheet" - styleseet에 css효과를 적용한다는 의미

3. 그냥 코드 옆에다 적는 방법

가장 추천드리는 방법은 2번 방법이다. 가장 정리정돈 잘되어 있고, 똑같은 효과를 줄때 link를 그냥 적기만 해도 되기 때문이다.

출처 - codeit(웹퍼블리싱html/css)