본문 바로가기

📚 FrontEnd -Study/HTML, CSS17

[CSS] em / rem 절대적인 유닛에는 px을 많이 사용하고 있고 상대적인 요소에는 viewport와 em, rem을 많이 사용하고 있다. 그럼 언제 어떤 것을 사용하면 좋을까? 첫번째로 나누는 기준은 부모 요소의 사이즈에 따라서 사이즈가 변경이 되야 한다면 %나 em 같은 것을 사용하고 부모와는 상관없이 브라우저 사이즈에 대해 반응해야 한다면 viewport나 rem을 사용하면 된다. 두번째는 요소의 너비와 높이에 따라서 사이즈가 변경이 되야 한다면 %나 viewport를 사용하면 되고 font사이즈에 따라서 사이즈가 변경이 되야한다면 em과 rem을 사용하면 된다. 우리가 어떤 디자인을 만드느냐에 따라, 원하는 기능이 무엇인가에 따라 em 을 써야할 때 rem을 써야 적합한지가 있다. rem 먼저 rem은 root 요소,.. 2023. 2. 18.

TIL - [HTML/CSS 기초] 와이어프레임(Wireframe) : 레이아웃의 뼈대를 그리는 단계를 말한다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다. 와이어프레임은 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다. 목업(Mock-up) 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다. Flexbox로 레이아웃 잡기 Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. display: flex 분석.. 2023. 2. 16.

TIL - [CSS 기초] CSS CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. 지금까지 학습한 HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 알아야 할 단위 절대 단위 : px, pt, cm 등... * 픽셀(px)은 보기 장치에 상대적이다. 낮은 dpi 장치의 경우 1px은 디스플레이의 하나의 장치 픽셀(도트)이다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미한다. 상대 단위 : %, em, rem, ch, vw, vh 등... 상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 상대 길이 단위는 서로 다른 렌더링 .. 2023. 2. 15.

[HTML 기초] 웹 개발 이해하기 HTML - 구조를 만드는 마크업 언어 CSS - 스타일을 담당하는 디자인 언어 JavaScript - 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할, user와 상호장용하는 HTML 문서의 구조를 만드는 언어 Tag들의 집합 Tree 구조 : 문서의 메타데이터 선언 : 문서의 내용 담는 곳 : content division 을 의미, 한 줄 차지 : 줄 바꿈이 없는 content : Unordered list : List item : 줄바꿈 되는 입력 폼 input 속성 중 radio 와 checkbox의 차이점은 '하나만 선택 가능한가, 중복선택이 가능한가' 이다. 시멘틱 요소란? HTML5부터 시멘틱 웹이 중시되면서 여러 시멘틱 요소가 새롭게 만들어졌다. 시멘틱이란 '.. 2023. 2. 14.

css/ initial vs inherit vs unset 모든 CSS 속성에는 공통적으로 3가지 기본 값이 있다. initial, inherit, unset. inherit : 상위 요소에서 속성을 가져온다. initial : 속성의 기본값(브라우저 기본값) unset : 상속 또는 초기 역할을 한다. 부모에 일치하는 값이 있으면 상속으로 작동하고 그렇지 않으면 초기로 작동한다. 2022. 12. 10.

css/list sytle type 목록은 또는 태그로 만드는데 목록 앞에 붙는 문자를(Maker)라고 한다. 어떤 형식 또는 모양으로 마커를 사용할지는 list-style-type로 정한다. 속성값 : disc, circle, square : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 과 에 사용하는 속성값을 구분하는 게 맞지만, 에 decimal을 사용하거나 에 disc를 사용하는 등 바꾸어 사용해도 된다. 2022. 12. 10.

position position 속성 CSS 에서 position은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 대부분 position의 정확한 위치 지정 위해서 top, bottom, right, left 속성과 함께 사용된다. position : static CSS에서 position 속성 별도로 지정해주지 않으면 기본값인 static이 지정된다. 이때는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다. 이 말은 HTML에 작성된 순서 그대로 브라우저 화면에 표시되는 것이라 top, bottom, right, left 값들이 무시된다. position : relative position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있다. 요소를 원래 위치를 기준으.. 2022. 10. 24.

display / visibility CSS를 사용해 특정 콘텐츠 및 요소를 사라지게 만들어야 하는 경우가 있다. 이때 사용이 가능한 속성이 바로 display 와 visibility이다. 1. display와 visibility 차이점 가장 큰 차이점은 보엿을때의 공간이다. 즉, 기존의 영역을 빈공간으로 차지하고 사라지느냐 아니면 빈공간까지 사라지게 하느냐의 차이이다. visibility: hidden; display:none; 둘 다 css를 수행하면 보이지 않는 것은 동일하나 visibility 속성은 해당하는 요소의 영역이 보이지만 않을 뿐 화면에 그대로 빈공간으로 유지된다. 영역 자체는 사라지지 않는 것이다. ( 기능까지 숨김, 마우스 클릭 가능) display 속성은 영역 자체까지 사라지기 때문에 인접한 요소의 레이아웃에 영향을 .. 2022. 8. 26.

transform 안될 때 노티마드코더 코코아톡 혼자 코딩하고 있는데 .reply:focus-within input{ width:95vw; } 이 부분이 계속 실행이 되지 않았다. 처음에는 위에 .reply input 안에 transition:all .3s ease-in-out;을 적지 않아서 안된 줄 알았는데 해당 명령어를 적었는데도 되지 않았다. 밑의 영상처럼 width가 늘어나야 한다. 검색해도 딱히 해결책이 나오지 않아 내가 쓴 코드를 보며 이것저것 지워가며 다시 해보니 input의 부모 태그 reply__column:last-child에 display:flex; align-items:center; 이것 때문에 되지 않았다. 정확한 이유는 아직 잘 모르겠다... 2022. 8. 26.

vh/ vw/ %와의 차이 vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다. 100vh, 100vw가 전체 화면의 기준이 된다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px이 될 것이고 height:50vh; width:25vw; 로 설정한다면 height - 500px width - 200px 이런식으로 적용이 될 것이다. % 와 차이? 그렇다면 100%와 100vh 설정하는 것이 무엇이 다를까 1. vh는 width 에서도 사용이 가능하다. width:100%와 width:100vh는 엄연히 다른 뜻이다. 마찬가지로 vw 도 height에서도.. 2022. 8. 25.

focus-within CSS 선택자 : focus-within : focus-within은 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타낸다. 내부적으로 focus된 element가 있는지 알 수 있게 해준다. 흔히 사용하는 예시로는 의 필드 중 하나가 포커스된 경우 을 강조해야 할 때 유용하게 사용할 수 있다. HTML 이름: 성: CSS form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; }//form 안에 어떤 element가 focus 되어있다면 input { margin: 4px; } 2022. 8. 25.

will-change will-change will-change CSS 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공하게 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화 할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가할 수 있다. 너무 많은 요소에 will-change를 적용하지는 말자. 브라우저는 모든 것을 최적화하기 위해 가능한 모든것을 시도하고 있기 때문에 will-change와 묶인 강한 최적화는 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다. 값 auto 이 키워드는 특정 의도 없음을 나타낸다. 사용자 에이전트는 보통 실행하는 어떤 방법이던 최적화이던 적용해야 한다. scr.. 2022. 8. 13.

transition / transform transform(변형) - 이차원 좌표에서 요소를 변형시키는 프로퍼티이다. - 값에는 translate(), scale(), rotate(), skew() 4종류의 transform 함수를 사용해 이동, 확대축소, 회전, 경사를 만들 수 있다. ex) transform : rotate(45deg); 이동(translate) - translate() 함수는 요소를 X축 방향이나 Y축 방향으로 이동시킬 수 있다. - X축 방향값을 플러스로 하면 오른쪽으로, 마이너스로 하면 왼쪽으로 이동한다. - Y축 방향값을 플로스로 하면 아래로, 마이너스로 하면 위로 이동한다. ex) transform : translate(50px, 30px); 확대/축소(scale) - scale() 함수는 요소를 X축 방향이나 Y축.. 2022. 8. 11.

z-index z-index 보통 가장 나중에 작성된 마크업 요소가 가장 앞으로 튀어 나오게 된다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 position ( static 말고 다른 값 ) 을 주면 마크업과 상관없이 앞으로 튀어나온다. 앞써 position과 비슷한 것이 있는데 transform이다. translate 에 어떤 값이 들어가 있는지 상관없이 ex) transform : translate(0); 작성해주어도 앞으로 튀어나와 있는 결과를 만들 수 있다. 예외적으로 opacity는 투명도인데, 이것의 속성값을 0.9999를 주면 튀어나오는 결과를 만들 수 있다고 한다. 노란색 테두리가 있는 낙타를 '낙타1'이라고 부르겠다. parasol보다 마크업 언어로 뒤쪽에 작성되어 있고, 해당 낙타1의 .. 2022. 8. 10.

max-width/max-height max-width 와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹디자인에서, 화면에 따라 다르게 스타일을 적용할 때 자주 사용된다. 두 속성 다 주요 브라우저에서 지원하지만 ie6 이전 버전은 지원하지 않는다. (ie7은 doctype을 선언해줘야 함) max-width 속성 어떤 요소의 최대 너비를 지정한다. 요소의 너비값이, max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화 시킨다. 이미지 가로 너비가 500px일 떄, max-width:400px 으로 설정하면 400px 이하로만 이미지가 보인다. 속성값 none : 기본값 길이값 - px, cm, em 등 % : 요소를 담고 있는 박스에 비례한 백분율 i.. 2022. 8. 3.

이전 1 2 다음

728x90

티스토리툴바