파카

앞에서 Flex에 대해 간단하게 공부했었다. 하지만 여전히 CSS는 익숙치 않고 결국 flex는 반응형 웹을 위해 알아야 할 속성이기에 다시 활용하면서 익숙해지려고 한다. flex와 grid는 친숙해져야하는데 이유는 반응형 웹 개발에 있다. 반응형을 해야 하는 이유는 여러가지가 있을 테지만 가장 큰 이유는 모바일 환경 때문이다. 화면의 크기가 다양해지고 그에 따라 웹 환경이 변해야 사용자에게 편의를 제공할 수 있으니.. 차근차근 Flex와 Grid를 정리한 후에 기존에 서비스 되고 있는 곳을 따라해보려고 한다. 새로운 Display 속성 Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 합니다. 이때 부모를 flex-container, 영향을 받는 자식들을 flex-item ..

당분간 CSS 는 계속해서 봐야 할 거 같다. 왜이리 친해지지 않는건지 ㅠㅠ Position : CSS 의 포지션 속성을 정한다. 속성 static : 모든 태그는 기본적으로 값을 지정하지 않을 경우 기본으로 static 값을 가진다. relative : 상대값을 설정할 수 있는데 부모 기준으로 상대적인 값이다. ex) left top right bottom 등의 값을 설정할 수 있다. left: 20px 은 좌측에서 20px 떨어진 것을 말한다. absolute : 기본적으로는 html 기준으로 화면 좌측 상단 이지만, 부모 요소의 position 값이 설정될 경우 position 속성을 가진 가장 가까운 부모요소가 기준이 된다. 자 지금까지 배운 것을 기준으로 아주 아주 간단하게 활용해보자.. 참고로..

영어로는 Pseudo-classes와 Pseudo-elements 이다. Pseudo-classes 가상 클래스 선택자를 먼저 알아보자 pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 뜻을 보고 유추해보면 1. 가상 클래스 선택자는 셀렉터와 함께 사용할 수 있다. 2. 가상 클래스는 지정된 요소의 상태를 설명해준다. MDN에서 제공해준 예제와 함께 보자 여러 버튼이 있고 버튼위로 마우스가 정지해있으면 해당 버튼의 색상을 변경해주는 코드다. /* Any button over which the user's pointer is hovering */ button:hover ..

CSS Basic Box Model 다시 처음으로 돌아온 거 같지만 조금 더 넓혀가는 내용이다. 아무 의미없이 깜빡하고 사용했다면 다시 정리하자 Margin : 박스의 바깥 여백을 제어 Padding : 박스의 안쪽 여백을 제어 Overflow : 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다 : 크게 4가지 속성이 있으며 해당 속성에 따라 동작은 MDN을 통해 확인해볼 수 있다. 앞서서 Box Mode을 설명하게 된 이유는 아래의 box-sizing 때문이다. 나 같은 경우는 그림을 먼저 보고 순간적으로 무슨 뜻이지 했었다. 그래서 MDN 내용을 찾아보고 정리를 하게되었다. content-box 속성 // box-sizing 속성은 박스의 크기에 대한 기준을..

앞으로 자주 사용할 부분의 개념을 정해보려고 한다. CSS는 아래의 단위로 크기를 조정할 수 있다. 단위 Releative 상대적이거나 (em, rem, vh, vw) Absolute 절대적(고정된) (px, pt) 고정 크기 단위 설명 가변 크기 단위 px 픽셀 em, rem em : 배수 단위 (부모의 글자크기에 따라 기준점이 달라진다.) 크롬기준 기본값 16pt root em : (최상위 요소의 글자크기에 따라 달라진다.) pt 포인트 (워드나 한글에서 사용하는 폰트 크기 단위) vw, vh 화면비 백분율 단위 vw : 넓이 vh : 높이 in 인치 vmin, vmax 화면비 최소, 최댓값 나중에 작성하겠지만 미디어 쿼리에서도 사용하여 모바일 환경을 위해 css 조정할 때 사용한다. cm, mm c..

확실히 HTML과 CSS의 정리가 필요하다. HTML 과 CSS는 쉬워보이면서 참고없이 하기가 쉽지 않고 그저 따라치거나 유튜브를 보다보면 나도 저정도는 ?하고 착각에 빠지기 쉬운거 같다. 더군다나 개인적으로 미적감각이 없다고 생각하다보니 잘 실습하지 않았던거 같다. 그래서 당분간 계속해서 정리해보려고 한다. 그러기에 앞서서 Semantic Tag에 대해 알아볼 필요가 있다. Semantic Tag : 의미가 있는 태그라는 뜻이다. 중요하다고 하는데 크게 인식을 못하다가 역시나 내가 잘 사용하지 못해서 검색해보았다. 각 태그들에는 의미가 있다. : this element is used to specify the header for a web document or the header for a sectio..

현 시점 꼭 알아야 하고 CSS의 꽃이라 불린다는 Flexbox에 대해 정리하려고 한다. 기존에는 position, float, table 등을 이용하여 ui를 구성했었다고 한다. MDN에서 float를 보면 이미지를 문자로 덮는 형태를 보여주는데 아래와 같다. https://developer.mozilla.org/en-US/docs/Web/CSS/float 이전에는 위와 같은 속성을 이용해서 박스들을 float 속성을 이용해서 일종의 꼼수를 이용했었다고 한다. 하지만 이제는 flexbox 가 있어 기존의 목적대로 쓰인다고 한다. flexbox의 기본 개념 일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 ..

CSS 의 Display 와 Position 의 개념을 머리에 집어넣어 보자! div는 block span 은 inline으로 기본값이 정해져있다. 아래 코드와 같이 css 속성을 이용하여 변경이 가능한 것을 알 수 있다. 유튜브나 인터넷 블로그 글 등을 보고 CSS 를 치다면 무의식적으로 막 치는 경우가 생기는데 계속 생각하면서 코드를 작성해야겠다. 그 중 위치와 관련된 static(기본값), relative, fixed, stickey에 대해 개념을 정리해보았다. static relative fixed stickey는 스크롤 시에 static 기준 위치가 고정된다.

Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정합니다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.o..

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다. 출처 : https://developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozi..