Front-end

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미한다. 마진 병합은 다음 세가지의 경우에 일어난다. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다. 마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 한다. 마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용..

div를 겹쳐놓은 상태에서 border를 주면 border가 겹쳐져서 겹쳐진 부분만 더 두꺼워 보인다. border부분만 합치고 싶다면 border-collapse속성을 이용하면 된다. ‘border-collapse’는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. MDN ‘border-collapse’는 table 요소를 꾸미므로 div에서 사용하고 싶을 때는 요소를 테이블로 만들어줘야 한다. 부모 div(section)에 Display :table;자식 div에 display : table-cell;을 주어 table 속성으로 만들어준 뒤 부모 div에 border-collapse: collapse;를 추가해주면 테두리가 겹쳐진 div를 만들 수 있다. See..

class 선택자 class 속성은 글로벌 속성으로, 어느 태그에서도 사용할 수 있다. class 속성에 값을 넣게 되면 class 선택자를 이용해 해당 요소에 스타일 규칙을 적용할 수 있다. .foo {font-size:30px }; I'm hungry class 선택자를 쓸 때는 맨 앞에 .(마침표)를 찍는다. 이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다. class 선택자의 naming 규칙은 underscore방식을 사용한다. 다중 class .foo{font-size:30px }; .bar{color:orange}; I'm hungry class 속성 안에 공백으로 구분하여 여러 개의 class 값을 넣어줄 수도 있다. id ..

어떤 요소에 적용된 CSS 스타일이 상충할때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 요소를 선택하는데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. h1 {color:pink;} body h1 {color:blue;} 두 규칙은 모두 h1을 선택하지만, 지정하는 스타일은 서로 다르다. 그렇다면 h1은 어떻게 표현될까? h1에는 color : blue가 적용되는데 이는 구체성과 관련이 있다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성..

css 구문 h1 { color: yellow; font-size:10px; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 10px" 선언부(declaration block) - "{ color: yellow; font-size:10px; }" 규칙(rule set) - "h1 { color: yellow; font-size:10px; }" css 적용 inline 안녕하세요 inline은 해당 요소에 스타일 속성을 이용해 규칙을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않고, 선언부의 내용만 스타일의 속성 값으로 넣어준..

줄바꿈이 존재하는 텍스트 데이터를 그대로 출력하고 싶었는데, div, p 태그 안에 넣어도 줄바꿈이 되지 않았다. 관련해서 검색 중 pre 태그에 대해 알게 되었다. 태그는 미리 정의된 형식의 텍스트를 정의할 때 사용한다. 또한 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다. MDN text1 text1 text2 div와 pre태그 안에 같은 텍스트를 입력했더라도, 다른 view가 출력된다. See the Pen Untitled by sally (@sally0) on CodePen. 또한 pre 태그는 내부에 있는 글을 “그대로”보여주는 특징이 있어, width가 넘어가도 줄바꿈이 되지 않는다. 이때는 pre 태그 css에 white-space: pre-wrap를 추가해준다. (..

목록 리스트 태그들을 알아보자. 리스트 태그에는 ul, ol, li, dl, dt, dd 태그가 있다. 짝에 맞게 순서대로 살펴보자!🧞‍♂️ ul,ol,li tag , ul태그는 순서가 없는 목록을 만들 때 사용하며, ol태그는 순서가 있는 목록을 만들 때 사용한다. li태그는 ,내부에 들어가는 요소를 의미한다. HTML CSS JavaScript dl,dt,dd tag dl태그는 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용한다. , dt태그는 제목을 표시하며, dd태그는 설명(내용)을 표시한다. 🍎사과 사과는 빨간색이다. 🍊오렌지 오렌지는 주황색이다. 지금까지 리스트 태그의 종류는 ul, ol에 li 요소 태그밖에 없는 줄 알았는데, 시멘틱 태그를 공부하게 되면서, 리스트 태그를 다시 살펴보다가,..

시맨틱 태그의 semantic은 ‘의미의’, ‘의미론적인’이라는 뜻을 가진형용사를 말한다. 따라서, 시맨틱 태그란 의미가 있는 태그를 말한다. 예를들어 는 의미없이 단순히 텍스트를 굵게 표현하는 태그지만, 은 중요하다는 의미를 지닌 태그다. 은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것이다. 따라서 "중요하다"는 의미를 포함하고 싶을때는 가 아닌 을 사용하는 것이 적절하고 시맨틱한 마크업이라고 할 수 있다. 이렇게 의미있는 태그를 사용하면 다음과 같은 장점을 가질 수 있다. 1.검색엔진최적화(SEO) 검색엔진은 HTML코드 만으로 그 의미를 인지하는데 이때 시맨틱 요소를 해석할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미있게 문서정보를 전달할 수 있다. 2..

React에서는 Children props를 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 가능하다. function FancyBorder(props) { return ( {props.children} ); } function HelloComponent() { return ( hi, hello ); } ReactDOM.render( , document.getElementById('root') ); JSX태그 안에 있는 것들이 FancyBorder컴포넌트의 childern prop으로 전달된다. function SplitPane(props) { return ( {props.left} {props.right} ); } function App() { return ( ); } children 대신 구멍을 ..

DefaultProps , Styled-Components의 Props넘겨주는법, Type지정해주는 법에 대해 알아보자. 초기 Props 값 DefaultBadge.defaultProps = { info: "날씨", color: "pink", }; defaultProps 프로퍼티를 할당함으로써 props의 초기값 정의가 가능하다! 공식문서 참고 Styled Component의 props & Type정의 DefaultBadge에서 받아온 color를 Badge의 props로 넘겨주고 type BadgeType = { color?: string; }; const Badge = styled.span` padding: 5px; margin: 10px; border-radius: 3px; background-co..