position position 속성은 요소의 위치를 조정하는데 사용되는 속성이다. 다음과 같은 속성들을 조합하고, 다른 속성들과 함께 사용하여 원하는 레이아웃과 위치를 구현할 수 있다. static 기본값으로, 요소를 문서의 일반적인 흐름에 따라 배치한다. top , right, bottom, left 등의 속성은 적용되지 않는다. relative 요소를 자기 자신을 기준으로 상대적으로 이동시킬 수 있다. 이동시키려는 경우 top , right, bottom, left 속성을 사용할 수 있다. 또 다른 요소들과 겹칠 수도 있다. absolute 가장 가까운 조상 요소 중 position 속성이 static이 아닌 경우를 기준으로 위치한다. 다른 요소들의 영향을 받지 않고 원하는 위치로 이동할 수 있다...
SCSS (Sassy CSS) SCSS는 웹 개발에서 사용되는 스타일 시트 언어중 하나로, CSS의 확장버전이다. 보다 효율적이고 모듈화된 방식으로 스타일을 작성하고 관리할 수 있게 도와준다. // 변수 선언 $primary-color: #3498db; $secondary-color: #e74c3c; // 믹스인 정의 @mixin button-style { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } // 스타일 규칙 .button-primary { @include button-style; background-color: $primary-color; color: white; &:hover ..
HTML MDN 모든 웹기술이 담겨있는 문서 MDN https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org whatwg html에 관한 표준, 커뮤니티 사이트 https://whatwg.org/ Web Hypertext Application Technology Working Group (WHATWG) whatwg.org HTMLhint HTML에 필요한 정적 코드 분석 도구 htt..
💬 들어가며 마크업과 CSS 를 하다보면, 상자 안에 가운데 정렬해 아이콘을 넣어야 할 때가 있다. 가로 정렬, 세로 정렬등이 있지만 이번에는 세로로 가운데정렬을 하는 경우를 살펴보자. 위와 같은 예시 이미지 처럼, 반응형에 맞춰 input 창의 세로 높이도 조절이 될때마다 그에 맞게 눈동자 아이콘이 가운데에 위치 하도록 해보자. 초보자들은 내가 했던 것 처럼, input 창의 height 값에 맞춰서 대강 가운데에 오도록 했을 것이다. 💡 문제 해결 input 창과 눈 아이콘을 의미하는 button 태그는 같은 레벨에 있을 것이다. 해당 두가지를 div태그로 묶어 relative를 준다. 그렇다면 div창크기에 맞춰 input이 생길 것이고, button은 div태그의 크기에 맞춰서 이동되도록 할 것 ..
https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org MDN 사이트를 참조하여 글을 작성합니다. float float은 요소를 띄워 표시하는 기능이다. 하지만 가야한다. 알바가기싫다... 알바가기싫다... 알바가기싫다... 일단 알바가기 싫다에 기본적인 float left를 사용하면 알바가기 싫다가 하나의 문장이 된것처럼 ..
Swiper Demos 위와 같이 HTML/CSS 이미지 슬라이드를 만들어보자! 먼저 사이트에 접속한다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 디자인 예시를 보면서 원하는걸 선택해 준다. 빨간색으로 밑줄친 Core에 들어가서 먼저 붙여넣을 것들을 붙여넣어준다 Core 에 들어가면 html 파일이 작성된걸 볼 수 있는데 10번째 줄에 있는 link를 Head 영역안에 붙여넣어준다 영역안에 붙여넣고 제일 아래에 보이는 두가지
Flex는 최대한 예시를 많이 집어 넣으면서 변하는 과정을 볼게요 먼저 박스들을 만들어봅시다. Flex 의 기본 작동 11111 22 3 4444 Flex container 가 될 container 하나와 그안에 박스를 만들 item 4개를 만들어봤습니다. 그리고 container에 Flex를 주면 이렇게 되네요. 이처럼 부모요소인 container 안에 가로로 쭉 배치가 되게 됩니다. 만약 부모요소의 너비값이 이거보다 작으면 어떻게 될까요? 보이는 것처럼 아무 이상이 없는것 처럼 보이지만 개발자 도구를 통해 확인하니 초록색 영역인 부모 너비를 뚫고 나온 모습을 확인할 수 있습니다. 가로로 배치되고, 너비가 충분치 못해도 똑같이 작동하는 것을 확인할 수 있죠. Flex 방향 설정(가로, 세로) Flex는..
그리드 가든 CSS에서 박스들을 배치하는 방법중 Grid에 대해 공부해보자. https://cssgridgarden.com/#ko 먼저 그리드 가든 게임사이트에 들어가면 간단하고 재밌게 문법에 대해 알아 볼 수 있다. 그리드에는 column과 row 즉 열과 행이 있다. column (열) -> 세로 row (행) -> 가로 다른 개발언어와 다르게 시작점이 1이므로 이미지에서 보이는 빨간색 기준점들은 2가 된다. /* 행과 열의 시작점*/ grid-column-start: 2 ; grid-row-start: 3; /* 행과 열의 끝지점*/ grid-column-end: 3; grid-row-end: 4; 와같이 시작점을 지정해주거나 끝지점을 지정해 주면된다. 박스1 박스2 박스3 박스4 박스5 박스6 박..
HTML 이란? Hypertext Markup Language로 하이퍼텍스트를 작성하기 위해 만들어진 기본적인 웹 언어다. 하이퍼 텍스트 : 단편적인 정보들을 하이퍼링크라는 고리를 이용하여 엮어 다른 문서로 이동하거나 정보를 보내는 등의 다각적으로 정보에 접근할 수 있는 체계를 의미한다. 시멘틱 마크업(semantic markup) 이란? 시멘틱 마크업이란 웹 문서를 구조화하고 내용을 의미론적으로 표현하는데 사용되는 HTML 요소들을 말한다. 시멘틱마크업은 웹 페이지의 요소들이 그들의 의미와 역할을 명확하게 나타내도록 설계되었다. 이는 SEO(검색엔진 최적화)와 접근성을 향상시키는데 도움을 줄 수 있다. 시멘틱 마크업을 사용하면 얻는 이점 검색엔진 최적화 (SEO) : 검색엔진은 문서의 구조와 의미를 파..