Code Playground

< h1 > Code Playground </ h1 >

지난 주부터 회사에서 해결이 안되서 골머리를 앓았던 문제에 대해서 얘기해보려고 한다. 보통의 UI에서 대부분 모달(팝업이라고도 부른다)이 뜨면 모달 뒤에 body 영역을 반투명한 검정색 레이어로 덮어서 모달의 컨텐츠가 더 도드라지게 만든다. 이 반투명한 검정색 영역을 주로 Dim 영역이라고 부른다. 보통 팝업창 내에 컨텐츠가 길어서 스크롤이 있는 경우에는 팝업 내부에만 스크롤이 잘 되게 하기 위해서 Dim 영역 뒤에 있는 body의 scroll은 막는 경우가 많다. 그리고 웹에서는 scroll 막는 것도 쉽게 처리할 수 있다. 바로 팝업이 떴을 때 body 태그에 overflow: hidden을 걸어줘서 scroll을 못하게끔 막아버리는 방법이다. 1. body 태그, overflow: hidden; 코..

이번 주에 회사에서 개발하다가 씨름했던 "비율에 따라 줄어드는 이미지 구현기"를 정리해보려고 한다. 음, 그러니까 주어졌던 요구사항은 이러했다. 우리는 리액트로 개발을 하고 있다. 이미지는 SVG로 주어지며 되도록이면 .svg 파일이 아닌 SVG를 리턴하는 React 컴포넌트로 처리되었으면 한다. 예를 들어서 이미지의 사이즈가 300 * 200이고 이미지를 감싸는 컨테이너 사이즈가 400 * 200이라고 해보자. 이 경우에 이미지의 높이가 200보다 작아진다면 이미지 사이즈는 400 * 200의 비율대로 줄어들어야 한다. 반대로 이미지의 높이가 200보다 커진다면 이미지는 커지면 안되고 양쪽 여백만 늘어나야 한다. 특정 비율대로 줄어들고 늘어나는 이미지를 구현하는 일은 약간의 CSS 트릭을 쓴다면 그렇게..

위와 같은 리스트를 html, css로 표현할 때,실제 태그에 숫자를 적지 않고 가상클래스에 counter()를 사용하여 표현할 수 있다. 1. counter-reset : 카운터이름 시작숫자 /* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none;..

조금 더 아래에 밑줄이 생깁니다 원래 밑줄입니다 .underline1 { text-decoration: underline; text-underline-position: under; } .underline2 { text-decoration: underline; } 보통의 경우 디자인적으로 밑줄 간격을 띄우기 위해서text-decoration: underline보다는 border-bottom을 쓰거나 아니면 가상클래스 :after를 걸어서 작업하는데이번 프로젝트에서는 글자가 2줄로 떨어지는 경우가 있어 맨 밑에 있는 줄에만 밑줄이 생기는 문제가 생겼다. 그래서 text-decoration: underline;으로 작업하고text-underline-position: under; 속성을 주어 최대한 밑으로 떨어..

@font-face { font-family: 'pass'; font-style: normal; font-weight: 400; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA..

Day8 -background- [1] background background-color -> 배경색상 지정background-image : url("파일경로"); -> 배경이미지background-repeat : repeat/ repeat-x / repeat-y /no-repeat; ->배경이미지 반복 설정background-attatchment : scroll / fixed; -> 스크롤에 따른 배경 이미지 처리background-position :left/ right/ top/ bottom /center /px값; -> 배경 이미지 위치 background: 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능. [배경관련 속성 활용] - 이미지에 텍스트가 포함된 경우1) ..

Day7 -Position- 1. Position속성: 위치를 자유자제로 이동하기 위한 방법static 기본값relative 상대위치(원래 위치 기준으로 이동)absolute 절대위치(부모 위치 기준)fixed (=absolute, 스크롤 여부와 상관없이 화면 고정) position:fixed로 적용하면 다른 요소가 그 위치로 밀려 올라올 수 있음.-> 그 만큼 padding을 부여해야 함. position: relative;top: 30px;left: 30px; 2. z-index : 요소들의 겹치는 순서 결정 -값이 클수록 위에 떠있음 ---> z-index를 아무리 써도 플래시는 못 덮음 3. 절대좌표 방식으로 할 때 부모에게 position속성이 부여되면 부모를 기준으로 좌표를 설정한다. --->..

Day6 -Display/Float- Display 속성 1. display: block; --->width와 height 적용O / 자동 줄바꿈block-level 요소의 기본값어떤 요소를 문단처럼 구성할 수 있음 2. display: inline; --->width, height 적용X / 줄바꿈Xinline-level 요소의 기본값어떤 요소를 문장처럼 구성할 수 있음 3. display:inline-block; --->width,height적용O / 문장으로 형성(줄바꿈X)크기 지정이 가능한 문장요소inline-block으로 적용 시 가로로 배치되는데 박스 사이에 공백이 생긴다.공백 제거(코드 상의 줄바꿈을 주석으로 처리박스1박스2 4. display:none; --->화면 표시 X(숨김) -JS와..

Day5 -CSS 박스 모델- 박스=Block Level 요소 (...) [1] 박스의 크기를 결정하는 요소 1. 내용 영역의 넓이 --->width, height: px단위, %특별히 설정되지 않은 경우 넓이는 부모 가득, 높이는 내용만큼.고정값을 갖기 때문에 한 번 값이 부여되면 늘어나거나 줄어들지 않는다. 2. 테두리 --->border: width(px) style(solid dashed dotted none) color;-border-top/border-right/border-left/border-bottom 3. 내용 영역~테두리 사이의 여백 --->padding값을 하나만 지정하는 경우: 상, 하, 좌, 우 동일 지정값을 두 개 지정하는 경우: 상, 하 / 좌, 우값을 네 개 지정하는 경우:..

Day3~4 -CSS/글자 속성- [1] HTML 태그 분류 Block Level: fieldset / blockquote / form / ul , ol , li / h1~h6 / p / div / table관련 tag / address / noframes / center/ dir / hr / menu / dl / pre Inline Level: a / img / span / br / input / strong / label / textarea / i / select / u / iframe / strike / abbr / button / sub / q / font / q [2] 적용 방법 1. head태그 2. 외부 파일 링크 [3] Selector 1. tag 이름h1 { color: #222; } 2..