본문 바로가기

HTML, CSS

 (30)
(CSS) fixed와 sticky 차이, 화면에 요소 고정하기 css에서 특정 요소를 화면에 고정시키고자 한다면 position: fixed; 또는 position: sticky;를 활용하면 된다. 그런데 둘의 차이점이 궁금해져서 찾아보게 되었다. fixed 부모의 위치와 상관없이 사용하면 해당 요소는 화면에 고정된다. 아래 예시를 보면 부모 div(핑크)를 지나서 스크롤을 해도 그에 영향을 받지 않고 계속 고정되는 모습을 볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 sticky fixed와 거의 비슷하게 동작하나, 부모의 영향을 받는 것이 차이점이다. 부모(핑크)의 내에서는 위치가 고정되지만, 스크롤이 부모(핑크)를 지나가면 고정이 멈추는 것을 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스
(CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법 css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다.  따라서 모든 해상도에서 웹이 잘 보여주기 위해서는 반응형으로 디자인을 하는 게 좋다. 이때 사용하면 좋은 것이 display: flex; 이다.   flex 사용 방법자식 앨리먼트에 flex를 적용하고 싶으면 부모 앨리먼트를 flex container로 만들어야 한다. 즉 아래 html에서 span 태그에 flex를 적용하고 싶으면 자식인 fruit-basket__apple이 아닌 부모인 fruit-basket에 flex를 적용해야 한다는 것이다. apple banana.fruit-basket{ dis..
id와 class의 차이점과 사용방법 앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다.  content   오픈 태그 안에는 속성(attribute)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값이다.이번 포스팅에서는 속성 종류 중 하나인 id와 class를 설명한다. 만약 속성의 종류에 뭐가 있는지 궁금하고, 어떻게 사용하는지 궁금하면 아래 사이트에 자세히 나와있다. HTML 특성 참고서 - HTML: Hypertext Markup Language | MDNHTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.developer.moz..
HTML block태그, inline태그 차이 html 태그는 크게 block 태그, inline 태그으로 나뉜다. block 태그 block 태그 종류 : h1~h6, div, ol, ul, li, p, form 등 block태그는 옆에 뭐가 오지 않는다. 자동으로 줄바꿈이 된다는 뜻이다. block 태그는 높이(hight)와 너비(width)를 지정할 수 있으며, 여백과 관련된 3가지 속성을 가진다. Margin : 경계(border) 바깥 공간 Border : 경계 Padding : 경계(border) 안쪽 공간 inline 태그 block 태그 종류 : a, b, img, input, strong, span, br, button 등 inline태그는 줄바꿈이 되지 않는다. 그래서 inline 태그들은 여러개 작성해도 같은 라인에 출력된다. i..
HTML 기본 구조 여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요 : 문서 형식 선언 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 태그 !DOCTYPE 뒤에 html을 적은 것은 이 문서가 html로 작성되었다고 알리는 것 : 인코딩 파일과 웹 브라우저의 인코딩 방식을 통일해 깨짐을 방지하는 태그 : 문서 정보 전달 브라우저에게 문서의 정보를 전달하는 태그. 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들. 중요 : head 에 넣는 정보는 웹상에 보이지 않는다 : 문서 제목 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시된다. : 화면에 표시되는 콘텐츠 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그 중요 ..
HTML, CSS이란? HTML (Hyper Text Markup Language) 웹 페이지를 만드는 컴퓨터 언어 Hyper Text : 문서 내부에 다른 문서로 연결되는 참조를 넣어 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 링크를 통해 한 페이지에서 다른 페이지로 뛰어넘는 비순차적 접근법을 표현함 Markup Language : 문서를 구조적으로 표현해내는 언어 HTML은 마크업 언어를 통해서 정보를 본문, 제목, 주소 등으로 구조적으로 표현 가능 브라우저는 HTML을 읽어들이고 그것을 표시에 우리에게 보여줌 정보는 태그(Tag)를 통해 표현됨. 태그는 꼬리표를 뜻하며 정보를 구조적으로 나누는 역할을 함 태그의 구조는 기본적으로 content 첫번째 태그를 통해 시작을 알리고 /가 포함된 태그를 통해 끝을 알림..

티스토리툴바