목록전체 글 (164)

개발 공부 기록하기

DAY 19. 배경색과 배경 범위 지정: background-color, background-clip

1. 배경색 지정: background-color 이 스타일은 이미...ㅋㅋㅋㅋㅋ 어디선가 보고 쓰고 있었던 기술이다...ㅎㅎㅎ 말 그대로 배경 색을 지정하는 데 쓰는 속성인데, 웹 문서 전체에 쓰기도 하고, 텍스트, 목록 등 특정한 요소에도 지정할 수 있는 것이 특징이다! 속성 ─ 표 제목 줄에 쓰는 속성 ─ 에만 배경색을 입히는 데에도 쓸 수 있다. 색상을 표현하는 방법은 사용자가 선택하기 나름이다. hsl, rgb, 16진수 코드(예, #000000), 영문명 색상, 그리고 투명도를 조절할 수 있는 hsla, rgba도 모두 사용할 수 있다. 색상에 대한 자세한 내용은 이~~~~전 포스팅에 다룬 적이 있다. https://from-ms-to-developer.tistory.com/entry/DAY-..
프밍/CSS 2022. 11. 16. 23:43
Section 4. HTML의 다음 단계(1)

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 HTML5가 정확히 무엇인가 What Exactly Is HTML5? 6' 27" 필수 02 블록 vs. 인라인 요소 ─ 와 Block vs. Inline Elements ─ Divs and Spans 8' 42" 필수 03 기타 요소 모음: , , , 요소 Other Elements: , , , elements 6' 18" 선택 04 엔티티 코드 Entity Codes 6' 01" 필수 05 코딩 연습 4: Snowman Logo Exer..
프밍/HTML 2022. 11. 15. 23:47
DAY 18. 단원 마무리 문제 풀기

흐음.. 총 17장(章)으로 이뤄진 책에서 오늘로써 8장까지 마무리됐다! 장이 끝날때마다 마무리문제는 항상 있었는데, 개별적으로 풀기는 했지만 포스팅으로 남겨두지는 않았었다. (진짜 했다!!! 진짜로!!) 점점 배워가는 게 많아질수록 기록해두는 게 훨씬 더 낫다는 판단에서, 이번 장에서부터는 마무리 문제도 기록해두려고 한다. 마무리 문제 1. 그래서, 안에 img의 스타일을 문제에서 지시한대로 ① 1px의 #ccc색 실선, ②둥근 이미지, ③ 그림자 가로 세로로는 5px씩, 흐림 30px, 번짐 2px, 그림자 색 #000 요로케 지정해 주었다. 결과는!! 성공^ ─ ^ 마무리 문제 2. 이~~렇게나 긴 문제의 내용에 다음의 것을 추가하라는 주문이었다. ① article 요소 플로팅, 너비 350px, ..
프밍/CSS 2022. 11. 15. 00:06
DAY 18. 웹 요소 위치 지정: position, top, right, bottom, left

1. 웹 요소 위치 지정: top, right, bottom, left 웹 문서에서 요소를 원하는 곳에 갖다 놓기 위해 위치를 지정하는 속성이다. 아래 2.에서 다룰 position으로 기준 위치를 정한 뒤, 요소 위치를 top, right, bottom, left로 지정하면 된다. 속성값 설명 top 기준 위치 - 요소 간에 위쪽으로 얼마나 떨어져 있는지 지정. right 기준 위치 - 요소 간에 오른쪽으로 얼마나 떨어져 있는지 지정. bottom 기준 위치 - 요소 간에 아래쪽으로 얼마나 떨어져 있는지 지정. left 기준 위치 - 요소 간에 왼쪽으로 얼마나 떨어져 있는지 지정. 예제 1. Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris es..
프밍/CSS 2022. 11. 14. 23:16
Section 3. HTML 기초(3)

12. 앵커anchor 태그 하이퍼링크를 만드는 데 흔히 사용하며, 아~~주아주 자주 사용된다. tag를 통해서 다른 웹 페이지, 이메일 주소, 파일, 심지어는 현재 페이지의 다른 부분으로 스크롤이 내려가는 것까지 해낼 수 있다. I AM A LINK! 이렇게만 쓰면 하이퍼링크가 되지 않는다. 이유는 앵커 태그에서 가장 중요한 필수 사항인 '목적지' 즉, I AM A LINK!를 눌렀을 때 연결되는 페이지가 지정되지 않아서이다. 목적지는 보통 아래 두 가지 방법으로 지정한다. ① URL I AM A LINK! ② 다른 HTML 문서 (여기서는 about.html이라는 파일이 있다고 가정하기로^^) ABOUT PAGE VSCode에서는 빈 줄에 a 를 누르고 Tab 을 누르면 자동으로 가 입력된다. 13...
프밍/HTML 2022. 11. 12. 23:59
DAY 17. 웹 문서의 레이아웃: display, float, clear

1. 배치 방법 결정: display display 속성을 이용하면 블록 레벨 요소 → 인라인 레벨 요소 인라인 레벨 요소 → 블록 레벨 요소 로 자유롭게 전환할 수 있다. display는 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다. 속성값 설명 block 인라인 레벨 요소 → 블록 레벨 요소 전환. inline 블록 레벨 요소 → 인라인 레벨 요소 전환. inline-block 인라인 레벨 요소, 블록 레벨 요소 속성을 모두 갖고 있고, 마진과 패딩 지정 가능. none 해당 요소를 화면에 표시 × 예제. CSS 복수 선택자의 역할을 확인해보기 위해서 예제를 약간 변형했다. menu 1 menu 2 menu 3 menu 4 men..
프밍/CSS 2022. 11. 12. 23:24
이전 Prev 1 ··· 8 9 10 11 12 13 14 ··· 28 Next 다음