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..
풀이 dfs로 구현 dfs는 stack , bfs는 queue! 입력 중복된 값을 입력하지 못하므로 visited 리스트 생성 dfs for문을 돌며, 만약 방문을 안한 number라면 방문처리를 해주고, stack에 append()해준 뒤 dfs()재귀함수를 호출한다. 또 dfs()안에서는 만약 stack의 값이 M과 같다면 stack 값을 프린트 해주고 return된다. (len(stack) == M)되었다고 가정했을 때 dfs함수가 return되므로 끝난다. visited[number] = False구간으로 이동된다. stack이 빠지고 난 뒤 정상적으로 stack에 쌓이기 위해 false처리가 되고 stack.pop()이 실행된다. import sys input = sys.stdin.readlin..
풀이 bfs로 구현했다. bfs를 구현할때 그냥 외울 것: 넣기 전에 방문 처리하기 입력 문제에서 graph는 무향 그래프이므로, x값에 y, y값에 x를 append bfs 매개변수로 받은 a를 queue에 넣고 while queue:를 통해 반복문을 돈다. 만약 queue에서 나온 값이 b와 같으면 종료return 0 for문을 통해 graphx[x]리스트값을 돌며 아직 방문을 하지 않은 값이라면(visited == 0:) visited 값에 이전 visited값 +1(방문처리)을 해주고 queue.append() 만약 사촌관계가 없다면 visited[b]=0이므로 -1이 출력된다. from collections import deque import sys input = sys.stdin.readlin..
