프레임워크160 [생활코딩] HTML과 CSS가 만나는 법 [ CSS를 실행하는 방법 ] In-line(인라인) 방식 Hello World style 태그 Hello World 웹페이지에 CSS를 삽입하는 가장 일반적인 두가지 방법인데 In-line을 style을 사용하면 직관적이고, style 태그를 사용하면 추후에 style을 변경하기 쉽습니다. head > style이나 In-line style 속성은 HTML 속성입니다. 다만 In-line style에서 "color:red"나 head > style > "h2 { color : red }는 CSS 요소입니다. 2022. 1. 18. [생활코딩] 실습 환경 HTML과 CSS를 공부하기 위해서 필요한 건 딱 2가지이다. 1. 브라우저 2. 에디터 나는 Visual Studio Code를 사용 할 예정이다. Hello World [ 추가 팁 ] 2022. 1. 17. [생활코딩] CSS 시작하기 CSS는 웹페이지를 꾸며주는 언어입니다. 그 전에 HTML을 알아야 합니다. HTML은 CSS가 있기 이전부터 있었던 웹으로 치자면 태초의 언어입니다. 처음 시작 할 때부터 존재했던, 웹의 토대라고 할 수 있는 기술입니다. HTML은 CSS가 없어도 혼자 잘 지낼 수 있지만, CSS는 HTML이 없으면 혼자 지낼 수 없습니다. HTML의 본질 = 정보 HTML이라는 언어는 정보를 생산하고, 보관하고, 전송하기 위한 행위를 위해 만들어진 언어입니다. 즉, HTML에서 가장 중요한 것은 어떻게 정보를 잘 표현할 것인가 입니다. 처음 HTML이 등장 했을 때는 웹디자인이라는 분야가 없었습니다. 사람의 욕망은 끝이 없기 때문에, 시간이 지남에 따라 사람들은 웹 페이지가 아름다워지기를 바랬습니다. HTML의 태그.. 2022. 1. 17. [CSS] Flex Box CSS의 꽃!!! Flex Box는 두가지만 알고 있으면 큰 그림을 그릴 수 있습니다. 1) Flex Box에는 Container 박스에 적용되는 속성 값들이 존재하고, 각각의 Item들에 적용 할 수 있는 속성 값들이 존재합니다. Container display : flex, grid 등이 있음 flex-direction : 기본값은 row, 그 밖에도 row-reverse, column, column-reverse 등이 있음 flex-wrap : 기본값은 nowrap, 그 밖에도 wrap, wrap-reverse 등이 있음 flex-flow: flex-direction과 flex-wrap을 합친 속성 (ex flex-direction: row, flex-wrap: nowrap이면 flex-flow: .. 2022. 1. 9. [CSS] 레이아웃(display, position) 웹사이트를 만들 때 가장 중요한 것은?? 잘 정의한 박스들을 원하는 위치에 원하는 사이즈로 잘 배치 할 수 있는 게 가장 중요합니다. 그러기 위해서는 display와 position에 대해서 아는 것이 중요합니다. display block : 박스인 데 한 줄에 하나만 표시된다. inline : 한 줄의 공간에 따라 여러 개 표시되고, 컨텐츠의 사이즈에 따라 다르게 표시된다. inlline-block : 한 줄에 여러개 넣을 수 있고, 상자로 변환 되어서 컨텐츠의 사이즈에는 상관없이 박스의 width, height에 맞춰 표시된다. 더보기 더보기 더보기 1 2 3 div, span{ width: 80px; height: 80px; margin: 20px; } /* display: block, inline.. 2022. 1. 9. [CSS] 기본 셀렉터 1. 의미, 정의 CSS는 Cascading(작은 폭포, 폭포처럼 쏟아지는 물, 폭포처럼 흐르다) Style Sheet(스타일을 정의 해놓은 문서)의 약자입니다. → 폭포처럼 떨어지듯이 스타일을 정의 해놓은 문서를 말합니다. 즉, 정의된 세부적인 정의가 있다면 그것을 쓰고, 없다면 다음 기본으로 지정된 아이로 넘어가는 것을 말합니다. 계단식으로 스타일을 정의하는 문서 Author style → User style → Browser 순서로 스타일이 지정 됩니다. 2. 선택자 (selector) Universal (*) type (Tag) ID (#id) Class (.class) State (:) Attribute ([]) 3. 스타일링 더보기 더보기 더보기 First Second text Button 1.. 2022. 1. 9. 미디어 쿼리 사용법 (2) 다양한 디바이스들이 웹브라우징을 지원하면서 웹에서 화면의 해상도에 따라서 유연하게 콘텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 그에 따라 반응형 웹 디자인의 기본이 되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴 보겠습니다. 기본 문법 : 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념으로 생각하면 이해가 쉬울 듯 합니다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다. @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가고, 조건 부분이 만족 할 때만 스타일이 적용되고, 만족하지 않을 때는 스타일을 무시합니다. 1) 좁은 화면 스타일링 : 핸드.. 2022. 1. 5. 미디어 쿼리 사용법 (1) 미디어 쿼리란? : 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 weight, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용 할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 다르게 하여 적절한 모양으로 보여 줄 수 있습니다. 사용방법 1) 요소에 사용하여 특성이 조건에 맞을 때 css 파일을 불러옵니다. media 속성의 "screen and (max-width: 768px)"의 의미는 미디어 타입이 스크린이고, 화면의 최대.. 2022. 1. 5. [React] location(defaultProps) → useLocation(hooks) 사용하기! 기존에는 useHistory 사용 시에 location을 사용해서 아래와 같이 데이터를 담아 이동하고 이동한 컴포넌트에서는 아래와 같이 데이터를 받아 사용 했습니다. 이럴 경우 파라미터로 {location} 받을 시 props를 받아오지 못하는 단점이 있었는 데 팀원분이 사용하시던 중 react-router-dom 패키지에 useLocation을 사용하면 파라미터로 props도 받을 수 있고! location 객체로도 데이터를 받을 수 있다고 알려주셨다! (아래처럼 사용하면 된다) 참고 사이트 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4 React Router dom의 유용한 h.. 2021. 12. 31. 이전 1 ··· 12 13 14 15 16 17 18 다음 728x90
