이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 선택자 우선 순위 (캐스케이딩)
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 구글 크롬 테마 변경하기 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
코드 에디터 Brackets
갑작스럽지만 코드 에디터 소개 영상을 하나 보고 가겠습니다.
생활코딩의 CSS 강의 영상 안에 위의 영상이 끼어있어서 그냥 올려봅니다.
(저처럼) 쓰고있던 코드 에디터를 잘 쓰고 계시는 분에게는 필요없는 영상일수도 있지만,
어쩌면 위에서 소개하는 코드 에디터가 정말 필요한 분이 계실지도 모르고, 생활코딩의 강의 영상을 통해 공부하고 있는 입장에서 중간에 있는 영상을 하나 빼먹기도 뭐해서 올립니다.
메모장보다 훨씬 편리한 코드 에디터
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 a 태그를 이용해 간단한 웹사이트 만들기 이 포스팅은 PC로 작성되었습
gogogameboy.tistory.com
아톰 Atom과 비주얼 스튜디오 코드 Visual Studio Code라는 코드 에디터를 소개하는 글도 전에 올린 적이 있습니다.
저는 비주얼 스튜디오 코드를 사용하고 있습니다.
display: inline과 block
본격적으로 이번 포스팅에서 배울 내용입니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
CSS로 display를 별도로 지정해주지 않으면 h1태그는 block의 속성을 가지고 한줄 전체를 차지하게 되고, a태그는 inline 속성을 가지고 한줄 전체를 쓰지는 않습니다.
그런데 style태그 안에 위의 소스 코드처럼 값을 넣으면 h1과 a태그의 속성이 바뀌게 됩니다.
Hello world
안녕하세요. 생활코딩입니다.
border 값은 주지않고, <h1> 대신에 <h3>를 써서 위의 소스 코드를 적용시켜보았습니다.
다음 포스트
CSS 박스 모델 (padding, margin)
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스 사이징 (0) | 2021.01.01 |
|---|---|
| CSS 박스 모델 (padding, margin) (0) | 2021.01.01 |
| CSS 선택자 우선 순위 (캐스케이딩) (0) | 2020.12.31 |
| CSS 구글 크롬 테마 변경하기 (0) | 2020.12.30 |
| CSS 상속 (0) | 2020.12.30 |
댓글