웹 개발/HTML & CSS
-
[CSS] CSS를 대체할 CSS in CSS와 CSS in JS에 대해 알아보자 (CSS Module , SCSS 등)웹 개발/HTML & CSS 2021. 5. 11. 19:37
프로젝트가 커질수록 모든 html 요소에 클래스 naming을 해줘야하고 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일히 찾아 변경해야하기 때문에 번거롭다. 또한 JS 파일과 분리되어있기 때문에 컴포넌트의 상태값 변화를 공유하기 힘들다. CSS 문제점 (Vjeux) - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제 - Dependencies: css 간의 의존관계를 관리하기 힘든 문제 - Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제 - Minification: 클래스 이름의 최소화 문제 - Sharing Constants: JS 코드와 상태 값을 공유..
-
[HTML/CSS] Tstory - story 페이지 클론웹 개발/HTML & CSS 2021. 4. 11. 23:49
노마드 코더님이 웹 프레임워크를 사용하기 전에 html css javascript 기초를 탄탄하게 쌓아두어야 한다고 하셨다. react 깔아보니 결국 javascript 기반이라 그런 말을 하셨구나 하는 생각이 들었다. react 공부하면서 틈틈히 공부해둬야겠다며 다짐함과 동시에 시작한 웹 페이지 클론! html css 를 사용하여 티스토리 웹 페이지 클론을 해보았다. 디테일한 디자인 구현보다 레이아웃 잡는 연습을 했는데 (나름 hover도 넣음)flex를 이용해서 컴포넌트 정렬이 확실히 편해졌다. 처음에는 익숙하지 않아서 일일히 컴포넌트 하나하나 다 만들다가중복되는 component은 디자인 적용만 하고 따로 div로 싸서 padding이나 margin을 주는 등 레이아웃을 적용하는 방식으로 리팩토링을..
-
[HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex)웹 개발/HTML & CSS 2021. 4. 8. 17:18
flutter에서는 수직을 column 위젯으로, 수평을 row 위젯으로 정의해 레이아웃을 만들었다. css에서는 flutter와 달리 float, display 등 레이아웃을 위한 다양한 방법이 있었는데 그 중 display property! 대부분의 요소들이 수직으로 display되는 block 구조이고 inline, inline-block처럼 수평으로 display되는 구조도 있다. 하지만 block 구조는 계속해서 수직으로 쌓이고 inline은 수평으로 쌓여서 내가 원할 때 줄바꿈을 어떻게 해야할지, 다른 방법은 있는지 고민이 많았다. 그래서 정리해보았다! float 속성을 이용한 수평 정렬 - clear property float을 이용해 수평구조를 만든 후 float의 적용을 없애고 수직으로 ..
-
[HTML/CSS] CSS 기본 레이아웃 요소 정리웹 개발/HTML & CSS 2021. 2. 17. 14:37
display란 요소를 어떻게 보여줄지를 결정한다. - block : 줄바꿈 - inline : 줄 바꾸지 않고 오른쪽에 표시 / width와 height를 지정 할 수 없음 - inline-block : 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음 / 마진값이 붙어있기 때문에 inline처럼 보인다. - vertical-align : 인라인 요소의 수직정렬 ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1 CSS display 속성 - ofcourse 개요 display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inli..
-
[CSS] CSS 속성 예시웹 개발/HTML & CSS 2020. 6. 30. 21:07
width : 가로너비 height : 세로 너비 margin : 요소 바깥 쪽 여백 padding : 요소 안 쪽 여백 *margin과 padding 모두 top, left, right, bottom 개별 설정 가능 color : 글자 색상 background-color : 요소 배경 색상 *background는 배경에 대한 단축속성 아래와 같은 폰트 하나와 상자 2개를 생성해보자 CSS 파일을 생성하여 색상과 너비를 지정해주었다. 가로너비 : 300px 세로너비 : 200px 폰트사이즈 : 60px margin을 각각 다르게 적용해보자 font : 20px box1 : 50px box2 : 80px box2에 padding을 적용해보자 box2에 안 쪽 여백이 60px만큼 적용된 것을 알 수 있다.
-
[CSS] CSS 기본 문법웹 개발/HTML & CSS 2020. 6. 23. 01:08
내가 보려고 정리하는 CSS 기본 문법 https://heropy.blog/ 를 참고했습니다. 선택자 (Selector) css를 적용할 html의 특정 부분을 지정하는 사인(sign) 이다. 선택한 부분을 속성 (Properties)와 값(Value)로 설정할 수 있음 (속성 : 값) 예시1) 로 정의해놓은 부분에 css 적용 div { color : red; font-size : 20px; width : 300px; height : 200px; margin : 20px; padding : 10px 20px; position : absolute; } 예시2) h1 부분과 p 부분에 각각 색상에 대한 css를 적용 title content h1 { color:red; } p { color:blue; } ..
-
[HTML] HTML 기본 문법웹 개발/HTML & CSS 2020. 6. 20. 12:31
내가 보려고 정리하는 HTML 기본 문법 https://heropy.blog/ 를 참고했습니다. Element TAG 사이에 콘텐츠를 표시함 Content * TAG의 예시 제목 (h1~h6) 문단 줄바꿈 ordered list unordered list 하이퍼링크 ... Element 의미 확장 속성값 추가 (attribute) 예시1) 이미지 삽입 예시2) 분할 ohbox div는 아무런 의미를 가지지 않는 태그이지만 class 속성은 'ohbox'라는 컨텐츠를 name이라는 태그 별명으로 묶었다. Element 구조 특징 - 부모 자식 요소 태그 내의 콘텐츠에 태그를 삽입할 수 있다. 이럴 경우 두 태그의 관계를 서로 부모(상위, 조상)요소 자식(손주, 하위)요소라고 한다. - 빈 태그 (Empty..