-
Web 프론트엔드 (4) / CSS 속성들과 Bootstrap 사용Programming/Web Programming 2023. 5. 4. 10:24
html에 이어 css까지 한번 더 복습에 들어갔다.
css는 블로그에도 자세히 적어둔 내용이 있어,
기억이 안난다면 아래 포스트를 참고하며 공부해보면 좋을 것 같다.
CSS Tutorial (1) / CSS 시작하기 (1)
지난번에 html을 튜토리얼을 마쳐서 이어서 CSS 튜토리얼을 공부하려고 한다. 클래스 101, 프로그래밍 입문자를 위한 CSS 기초를 보고 공부한 내용 위주로 작성될 예정이다. HTML도 같은 강사님께 들
leere.tistory.com
앞으로 적을 내용에 대한 강의 출처는 아래에 주소와 같다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!
https://class101.net/ko/products/5f53ae772e3e0d001cd99667
[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교
📍웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 이런 분들이 개발자 사관학교를 수강하면 크게 도움됩니다! 1) 대체 뭐부터 개발해야할 지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작
class101.net
CHAPTER3 : 옷과 뼈대 = HTML, CSS
[1. 스타일 언어와 CSS 기본]
<1. HTML 파일과 CSS 파일 연결하기>
vscode를 쓰다보면 창을 줄이고 늘일 일이 많다.
하지만 창을 줄이면 코드가 같이 잘려 보이게 된다.
이럴때 창에 꽉차게 코드를 볼 수 있는 단축키는 다음과 같다.
Alt+Z (윈도우에서도 같은지는 모르겠다.)
본격적으로 CSS의 내용을 담아보려 한다.
HTML파일 위에 CSS코드를 입히는 방법은 다음과 같이 3가지가 있다.
(1) html 코드 내에서 style 속성 추가
(2) <head> 태그 내에서 <style> 태그를 추가하여 그 안에 작성
(3) <head> 태그 내에서 css 파일을 연결하여 파일을 두개로 분리하여 작성
1,2번은 css코드가 길어질수록 수정 및 관리에 유용하지 않기 때문에 3번 방법을 이용하여 진행한다.
<link rel = "stylesheet" href = "css파일 주소">
다음과 같은 코드를 통해 연결이 가능하다.
rel 이라는 속성값을 통해 연결해줄 파일 타입이 css이라는 것을 알려주고
href를 통해 css 파일이 저장된 주소를 적어준다.
만약, 같은 폴더 내에 css파일이 존재한다면, ./ 라는 리눅스 명령어를 입력하면
바로 같은 폴더 안에 있는 파일들을 자동완성으로 띄워준다.
전에 배웠던 리눅스 명령어 일부들을 여기서도 사용이 가능하다.
예를 들어 .. 는 이전으로 폴더로 나가는 것을 의미한다.
../를 입력하면 이전 폴더 안의 파일들을 자동완성으로 띄워준다.
<2. class와 id>
CSS에서 가장 중요한 개념들중 하나는 선택자이다.
html내에 어떤 태그를 선택하여 색상, 크기, 폰트 등을 바꿀 것인지 결정해야 한다.
마치 포토샵에서 특정 레이어 또는 레이어그룹을 선택해 디자인을 적용해주는 것과 비슷하기 느껴진다.
이때 사용되는 개념이 class와 id이다.
html내에서 속성값으로 class로 그룹짓거나 id로 이름 붙여주면,
CSS에서 해당 그룹 또는 이름을 선택해 디자인을 적용하는 방식으로 진행된다.
위 사진 속 코드를 보면 h태그들에는 그룹을, 하나의 p태그에는 고유한 이름을 붙여주었다.
그리고 아래와 같이 css 코드를 작성했다.
클래스는 . 을 통해 호출하고, 아이디는 #을 통해 호출한다.
그리고 {} 중괄호 안에 원하는 디자인 사항을 적는다.
각각 h태그에는 색상을 보라색으로 바꿔 주었고 첫 p태그는 글자 크기를 키워주었다.
웹사이트를 열어보기 전에, html과 css파일에 수정사항이 있다면 각각 저장을 마쳐주어야 잘 적용된 결과를 볼 수 있다.
웹사이트에서 어떻게 보이는지 확인해보자.
색상과 폰트크기가 각각 CSS코드에 맞게 잘 바뀐 것을 확인할 수 있다.
[2. 자주 사용되는 CSS + 웹폰트까지]
이번에는 CSS에서 가장 많이 사용되는 태그들과 선택 방법을 알아보자.
우선, 아래와 같이 작업 환경을 세팅할 수 있다.
- html과 css파일을 동시에 창에 띄워놓기 위해서는 위에 css탭바를 드래그 해서 오른쪽 편에 배치하면 된다.
- 그리고 잘리지 않게 보기 위해서는 각각 html 창과 css창 안에 각각 Option+Z를 눌러준다.
- html파일을 열고 개발자 도구를 열어 우측에 배치한다. (Cmd+Option+I (맥기준))
1. 태그 안에 태그/클래스 선택해보기
다음과 같은 코드를 통해 태그 안에 있는 특정 태그를 선택할 수 있다.
p > span {...} : p 태그 안에 있는 span태그를 선택 -> 모든 p태그 안에 있는 span태그들이 선택됨.
p > .title : p태그 안에 title클래스를 선택
요약: > 명령어를 통해 특정 태그 안에 있는 다른 태그를 선택할 수 있다.
title클래스는 p태그 안에 포함된 span태그이기 때문에 title 클래스의 색상을 바꿔주는 별도의 코드가 없으면
다른 span태그들과 똑같은 색상이 적용된다.
하지만 공통으로 해당될 경우, 우선 순위는 id > class > 태그 선택자이기 때문에 class 선택자가 지정한 색이 적용된다.
2. CSS의 태그와 속성을 이용해서 간단한 그래픽을 만들어보기.
div, border, margin, padding 등에 관해서는 위에 올려둔 지난번 css강좌에서 공부했던 내용을 참고하면 될듯하다.
3. 폰트를 적용해보자
간편하게 웹사이트 링크를 불러와 폰트를 바꿀 수 있다.
아래 링크를 타고 들어가 마음에 드는 폰트를 선택해 눌러준다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
상단에 Type tester을 눌러준 뒤, 하단에 Select all styles 버튼을 눌러주면
우측에 탭바 하나가 나타나는 것을 볼 수 있다.
상단의 링크는 html head태그 안에 하단의 font-family 코드는 css안에 복사 붙여넣기 해준다.
vscode 내에서 Shift+Option+F(맥기준)를 누르면 코드가 깔끔하게 자동정렬된다.
*는 css에서 전체 선택자이다.
*{...} 구문을 통해 해당 웹페이지내의 모든 글꼴을 바꿔주었다.
모든 글꼴이 잘 적용된 것을 볼 수 있다. [3. CSS가 그냥 커피라면 Bootstrap은 TOP]
부트스트랩을 사용하면 예쁜 디자인들을 쉽게 만들 수 있다.
우선 부트스트랩에서 제공하는 파일들을 내 html 파일에 연결해야 한다.
https://icons.getbootstrap.com/
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
* 강의가 올라온 시기가 꽤나 예전이라 부트스트랩도 조금 바뀌어있었다.
다음과 같이 최근 버전에 맞춰 부트스트랩을 연결해주었다. (정답인지는 모르겠다^^;)
부트스트랩 페이지에 들어가 상단에 Docs탭을 눌러주면, Quick Start라는 가이드가 나온다.
2번에서 보여주는 Include Bootstrap's CSS and Js 하단의 코드를 그대로 긁어 html에 옮겨주었다.
초반에 자체적으로 만들었던 HTML5 버전의 내용과 meta 태그 내용이 조금 달라서
아예 부트스트랩에서 복사해온 내용으로 새롭게 파일을 작성했다. (폰트와 CSS파일 링크 부분은 남겨두었다.)
부트스트랩이 잘 연결되어 작동하는지, 디자인을 하나 가져와 적용해보았다.
마찬가지로 Docs탭에서 왼쪽 스크롤을 내려보면 부트스트랩에서 민든 다양한 디자인 리스트가 보인다.
그 중에서 임의로 Buttons를 적용해보았다.
오른쪽에 Copy to clipboard를 눌러 html 코드를 복사한다.
Body부분에 옮겨주었다.
다양한 색의 버튼들이 잘 그려진 것을 볼 수 있다. CSS파일에 따라 폰트가 적용된 Hello, world! 문구를 볼 수 있다.
다만, 부트스트랩 코드를 활용한 버튼 속 글자의 글꼴은 바뀌지 않았다.
이부분에 대해서는 별도의 코드가 더 필요할 것으로 보인다.
버튼을 새로운 클래스를 만들어 넣어보기도 하고 버튼 태그에 font-family를 적용해봐도 바뀌는건 없었다.
다만 body태그 자체의 글꼴을 바꾸도록 한번 더 써주자 버튼 글꼴도 바뀐 것을 볼 수 있었다.
부트스트랩같은 편리한 툴도 나오고 정말 개발하기에 좋은 환경인 것 같다.
하지만 좋은 툴에 대한 기대가 너무 크다 보니, 때로는 하나 하나 코드를 작성하는 것에
꼭 그래야하나? 라는 생각도 문득 들곤 한다.
아무리 좋은 도구들이 세상에 많이 나오고 있다고 해도 결국은 스스로 작성해보는 능력은
정말 중요하다는 생각이 든다. 너무 많은 것에 의지하기 보다는
어떻게 사용하는 것인지 알고 주체적으로 사용해보는 연습을 하면 좋을 것 같다.
출처: 클래스101 / [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 프론트엔드 (6) / JavaScript 자바스크립트 기초 문법 (1) 2023.05.05 Web 프론트엔드 (5) / 부트스트랩 활용하기 (0) 2023.05.05 Web 프론트엔드 (3) / HTML과 태그, 실습해보기 (0) 2023.05.03 Web 프론트엔드 (2) / 웹 개발 이론 및 배포 과정 (0) 2023.05.02 Web 프론트엔드 (1) / Git Hub 환경 세팅 (0) 2023.05.01