웹개발 1주차 복습 (주석, 파일분리, 부트스트랩)

머성암 2023. 3. 7. 09:32

2023. 3. 7. 09:32

주석

> ctrl(또는 command) + / (슬래시)

> 언제 사용하나

1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 사용

2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 / 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다.

파일분리

> <style> ~ </style> 부분이 너무 길어지면, 보기가 어렵다.

> 지금은 그다지 길지는 않지만 나중에 필요할 거 같으니 알아두자.

빨간색 네모칸이 style 부분인데 이 부분을 잘라낸다.

그리고

파일을 하나 만들건데, 이름은 style.css로 한다.

style.css에 잘라낸 파일을 넣는다. 그렇게 잘했다면

위와 같이 나온다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

위와 같은 코드를 넣는다.

이렇게 하면 결과는???

저번에 했던 거와 똑같이 나온다.

부트스트랩

> 예쁜 CSS를 미리 모아둔 것

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

이 사이트에 들어가면 잘 만들어진 CSS 요소들을 사용할 수 있다.

어떻게 하느냐 하면

클릭해서 들어가면

이런 화면이 뜬다.

여기서 저 이모티콘이 있는 곳을 보면 Examples 라고 되어있고 밑에

<button type="button" class="btn btn-primary">Primary</button>

이런 형식으로 되어있는 코드들이 보일 것이다.

이 코드를 <body></body> 부분에 넣으면

이런 식으로 되는데

여기서 위에서 첫 번째 빨간색 네모칸이 바로 남이 만들어놓은 CSS코드를 가지고 오는 부분이다.

그리고 두 번째 빨간색 네모칸이 앞서 말한 코드이다.

그래서 결과물을 보면

이런 식으로 나온다.

exestudiary