Language/HTML&CSS
-
[CSS] Position : 레이아웃을 독립적으로 배치하는 방법Language/HTML&CSS 2022. 10. 19. 09:39
Position position은 페이지의 어떤 레이아웃을 특정 위치에 배치하기 위해 사용하는 CSS 속성이다. 핵심적으로 기억해야 할 내용은 언제 이 속성을 사용하는지이다. (출처 : https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4) 1. position:fixed는 스크롤이 내려가더라도 떠있는 header modal 오른쪽 하단에 항상 떠있는 floating 버튼 2. position: absolute는 특정 엘리먼트 내에서 다른 엘리먼트와 관계 없이 움직여야 하는 경우 position 프로퍼티는 요소의 위치를 정의한다. 프로퍼티 값으로 fixed, absolute, relative, static이 있으며 보통 부모요소..
-
[HTML] box-sizing: border-boxLanguage/HTML&CSS 2022. 10. 19. 09:09
css는 산수다 css를 적용하면서 느껴왔던 것이다. Box-model에 의해서, 패딩값이나 마진값 등등 요소의 사이즈를 조절할 때, 계산하는 것이 골치 아팠기 때문이다. 그래서 웬만하면 크기 조절을 rem과 em 등 상대 단위로 하고 있다. 상대단위란 ? - 상대단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 따라서, 상대 단위로 작성된 사이즈는 그 기준 수치만 바꿔주면(일단 처음에 상대 단위 사이즈를 넣을 때 레이아웃을 반영했을 것이기 때문에) 일괄적으로 함께 바뀐다. - em, rem, %, vw, vh 등이 있다. - em과 rem은 font-size의 속성 값에 비례해서 결정되는 상대 단위이다. 둘의 차이는, em은 해당 단위가 사용되고 있는 요소의 ..
-
src와 href, 차이는 무엇일까Language/HTML&CSS 2022. 10. 19. 08:52
등등 우리는 태그에서 참조할 자료주소를 가져올 때 href, src 속성을 사용한다. 그.런.데 href와 src의 의미는 무엇이고, 왜 link에는 src를 안쓰고, img에는 href를 쓰지 않는 것일까? 아래는 stackoverflow에서 그 이유에 대해 설명해주는 글들을 가져와봤다. 1. 쉬운 설명 참고: https://stackoverflow.com/questions/12032337/differences-between-url-src-and-href src -- I want to load up this resource for myself. -> src는 이 요소를 직접 로드하고 싶을 때 사용하는 속성 href -- I want to refer to this resource for someone e..
-
[HTML] div 태그는 현업에서 어떻게 쓰일까?Language/HTML&CSS 2022. 10. 19. 08:16
태그 div는 의미론적으로 아무런 의미가 없는 태그이다. CSS와 JS를 적용할 태그를 자식요소로 묶을 때 쓰는 태그로 썼던 경험은 있는데 현업에서는 주로 어떤 패턴의 작업을 할 때 사용하는지 궁금해져서 알아봤다. div 태그의 정의 : div 태그는 division(분할하다)의 약자로 HTML 문서 내에 한 줄의 가로(Block) 공간을 만드는 태그이다. 정의부터, div 태그에 담긴 정보에 대한 context는 읽을 수 없다. div 의 사용 패턴 : 위에 서술한대로 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 즉, 공간을 만드는 태그이기 때문에, 단순히 콘텐츠를 그룹화하는데만 사용이 된다. 그래서, SEO에 좋은 태그를 사용하려면 Semant..
-
[CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, DisplayLanguage/HTML&CSS 2022. 10. 18. 18:54
사전스터디 기간 동안, CSS...는 늘 나를 괴롭혀왔다. box-model 에서, HTML 요소는 요소별로 고유의 레벨이 존재하는데 그 레벨의 특성을 무시한 채 css 작업을 하니 삽질의 연속이었다. 아래 내용을 다시 학습 하고 난 후, "아 왜 안돼!!!" 라며 짜증이 났던 한 순간이 떠올라 얼굴이 화끈거렸다. 그 이유는, 자판기 커피 머신에 대고 드립커피 왜 안나와! 라고 짜증내는 것과 같은 격인데 inline 요소에 패딩값 줘놓고 왜 안바뀌냐며 짜증이 났던 것이다... 정확히는, inline 요소에 패딩 값을 지정할 수는 있다. 하지만 그 요소 위와 아래에 block 요소를 배치해보면 레이아웃이 겹치게 된다. 그 이유는 inline 요소가 height를 가지지 않기 때문이다. 블록의 경우 heig..
-
HTML 문서에 이미지를 삽입하는 방법 2가지Language/HTML&CSS 2022. 10. 18. 10:21
1. HTML 문서에 이미지를 삽입하는 방법 1. HTML 태그를 삽입하는 방법 2. CSS의 backgound-image 속성으로 이미지를 삽입하는 방법 우리에게 주어진 선택지는 2가지, 그렇다면 어떤 방법을 언제 사용할지 선택하는 기준은 무엇일까 궁금했다. 일단 둘의 차이를 보자면, 1. HTML태그는 HTML문서에, CSS는 CSS문서에 담는다. 2. 웹브라우저는 HTML 태그는 태그에 담긴 내용(정보)은 정보로 인식하지만, CSS 문서는 정보로 인식하지 않는다. 일단 두 방법에서 가장 큰 차이는 사용 목적이다. 따라서 HTML의 역할은 이 웹문서가 어떤 구조로 어떤 정보를 담고있는 문서인지를 설명하는 것이고 CSS는 그 문서를 보기 좋게 다듬어주는 역할을 한다. 여기서 차이가 생긴다. 그래서 본래..
-
[HTML_codecademy] Semantic HTMLLanguage/HTML&CSS 2022. 8. 11. 18:19
Navigational Links Home Posts Contact Facts About Dogs Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times. A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the gr..
-
[HTML_codecademy] FormsLanguage/HTML&CSS 2022. 8. 11. 18:18
Take this course and learn about the inner workings of an HTML form! Learn how to create your own form and integrate HTML5 validations. 1. HTML Forms Create a burger! What type of protein would you like? How many patties would you like? How do you want your patty cooked Rare Well-Done What toppings would you like? Lettuce Tomato Onion Would you like to add cheese? Yes No What type of bun would y..
-
[HTML_codecademy] TablesLanguage/HTML&CSS 2022. 8. 11. 18:16
Learn all the syntax you need to create tables in your HTML documents. Action List Profiles Settings Search the table Company Name Number of Items to Ship Next Action Adam's Greenworks 14 Package Items Davie's Burgers 2 Send Invoice Baker's Bike Shop 3 Send Invoice Miss Sally's Southern 4 Ship Summit Resort Rentals 4 Ship Strike Fitness 1 Enter Order Total 28 Review Great job! In this lesson, we..