무정하지 않게 살기

미디어 쿼리 media query 미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있습니다. - 미디어 타입 (어떤 타입인가, 음성 출력인가? 영상 출력인가? 미디어가 프린터기기 화면인지 음성기기인지, 어떤 미디어에서 노출이 되고 있는 것인지 등 ) - 조건에 대한 물음(미디어 특성) (=쿼리. 미디어의 크기 등) @medoa 미디어 타입 and 미디어 특성{ /* 해당 기기에서 사용할 CSS 코드 미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문 */ } 예를 들어 스크린 (pc와 모바일을 통틀어서 말하는 것) 인데, 기기 너비가 ..

상속 상속은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미합니다. 상속이 이루어지는 것은 대부분 글자로 이루어진 개별 요소들이고, 상속이 이루어지지 않는 것들은 대부분 블록으로 형성되어 박스가 되거나 영역이 표시되는 것들입니다. li의 요소를 선택하지 않아도 상위 요소의 ul에 적용된 스타일들이 하위의 li 요소들에게 적용 됩니다. 공용 키워드 모든 속성에 사용 가능한 키워드이며, 상속과 관계가 있습니다. inherit 상속이 가능한지 여부와 관계없이 해당 속성의 값을 받아올 수 있다. initial (브라우저에 지정되어 있는)해당 속성의 기본값을 요소에 적용한다. (브라우저의 초기값을 쓴다.) unset 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial..

기존에 선택자의 요소에는 여러 가지가 있다고 배웠습니다. 오늘은 그 기본 선택자 외의 선택자들에 대해서 알아보겠습니다. https://blue-dot.tistory.com/124 웹 CSS 입문 공부 12. 선택자, 선택자 우선순위 선택자란 선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 입니다. 무엇을 CSS로 꾸며줄 것인지 스타일을 입힐 대상 요소에 대한 것을 지정하는 것이에요. 선택자에는 종류가 여러가 blue-dot.tistory.com 1. 특성 선택자(속성 선택자) 특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택합니다. 속성 존재 여부 값에 따른 요소 선택 - 기호를 추가해서 요소를 선택할 수 있는 방식 [class * = ] 클래스 값에 “it”..

이번엔 전 시간에 확인했던 flexbox의 각 속성들을 알아볼게요. 수업은 아래의 링크를 참고합니다. 공부 자료 출처 : https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9 유노코딩 강의/집필/기타 협업 문의 beansdrawer@naver.com 기업 및 기관 출강 가능합니다. 웹 프론트엔드(HTML, CSS, JavaScript, React)/파이썬/C언어 등. 배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또 www.youtube.com ● flex-direction ● flex-wrap ● justify-content ●align-items ● align-self ● align-content 1. flex-direction 플..

콘텐츠를 원하는 위치에 삽입하는 것은 여러가지 방법이 있는데, 그 중 float, positon, 레이아웃 flexbox를 통한 방법을 알아보겠습니다. float (플롯) float는 요소가 문서의 일반적인 배치 외로 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하게 합니다. 속성값 의미 none 기본값, 원래 상태 left 자신을 포함하고 있는 박스의 왼편 right 자신을 포함하고 있는 박스의 오른편 문서의 일반적인 흐름(위에서 아래로, 왼쪽에서 오른쪽으로) 에서 마치 둥둥 뜬 것처럼 제외되지만 자신이 필요한 공간만큼은 가져갑니다. clear 속성 clear 속성은 float 요소 이후에 표시되는 요소들이 float의 영향을 받지 않고 (즉, float가 clear 해제된 상태) float ..

디스플레이display 는 우리가 보고 있는 이 화면의 구성 요소들에 대한 설정을 말합니다. 해당 속성값을 변경하는 것을 같이 알아볼게요. display 속성값 속성값 의미 inline 인라인으로 처리한다. block 블록 레벨로 처리한다. inline-block 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다. none 디스플레이(표시)하지 않는다. 인라인과 블록의 차이는 다음과 같습니다. 인라인은 너비와 높이를 임의로 결정할 수 없고, 콘텐츠 크기가 크기를 정합니다. 블록은 생성된 블록의 안에서 너비와 높이를 자유롭게 지정할 수 있습니다. 인라인 블록은 배치 될 때에는 최소한의 자리로 배치가 되지만 원한다면 너비와 높이를 추가정의 할 수 있습니다. border속성 테두리를 만..

우리가 화면에 출력할 텍스트에 스타일을 입혀서 다양한 방식으로 표현할 수있도록 하는 것이 텍스트 속성입니다. 텍스트 속성에 어떤 것이 있는지 알아볼게요. •font-family : 글꼴을 정의한다. •font-size : 글자 크기를 정의한다. •text-align : 정렬 방식을 정의한다. •color : 글자 색상을 정의한다 ● font-family 글꼴을 변경할 수 있습니다. 글꼴명을 속성값으로 지정합니다. 사용할 수 있는 전제로 존재하는 글꼴을 내 시스템에 설치를 해야만 사용할 수 있습니다. 만약 시스템 내에 설치되어 있지 않고 웹에 존재하는 폰트라면 웹 폰트를 지정하여 설치해야 합니다. 웹 폰트를 설정하는 방법에 대해서도 같이 알아볼게요. 우선 라이센스 걱정없이 상업용으로 쓸 수 있는 무료 폰트..

선택자란 선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 입니다. 무엇을 CSS로 꾸며줄 것인지 스타일을 입힐 대상 요소에 대한 것을 지정하는 것이에요. 선택자에는 종류가 여러가지 있어요. 기본 선택자, 그룹 선택자, 특성 선택자, 결합 선택자, 의사 클래스, 의사 요소 ... 이번에는 기본선택자와 그룹 선택자에 대해서 알아보겠습니다. 스타일 태그는 헤드의 맨 밑에 위치합니다. 우선 기본 선택자를 살펴보겠습니다. 선택자별로 적용되는 스타일을 보기 위해서 본문에는 각각 id와 class를 부여했어요. 김광석 - 그녀가 처음 울던 날 그녀의 웃는 모습은 활짝 핀 목련 꽃 같아 그녀만 바라보면 언제나 따뜻한 봄날이었지 그녀가 처음 울던 날 난 너무 깜짝 놀랐네 그녀의 고운 얼굴 가득히 눈물로 얼룩..

CSS 란? 콘텐츠의 크기, 색상, 위치, 움직임 등 웹문서에 추가되는 스타일 을 추가하는 언어 CSS 라고 합니다. CSS는 Cascading Style Sheets를 의미한다. •Cascading : 계단식 •Style : 멋을 내다 •Sheets : (종이) 한 장 즉 계단식으로 스타일을 정의하는 문서를 의미하며, 태그가 태그를 포함하는 계단식 구조를 지니고 있습니다. CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있기 때문에 HTML 문서가 없는 CSS 문서는 사실상 의미가 없습니다. 대부분 문서를 별도로 만드렁 작업을 할 때에도 HTML 과 CSS 문서의 이름을 같게 지정하여 작업합니다. HTML : 웹 문서의 콘텐츠를 구성하는..

뷰포트 viewport viewport란 현재 화면에 보여지고 있는 이 영역을 말합니다. 모바일별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타납니다. 예를 들어 크롬에서 개발자 도구를 열어보면 toggle device가 있습니다. 이것은 모바일 기기로 현재 웹 페이지를 열었을 때 어떻게 호환되는지를 미리 보여주는 화면입니다. 버튼을 누르면 모바일 화면으로 호환된 화면이 보입니다. Respnsive 의 드롭박스를 클릭하면 다양한 휴대폰의 종류도 선택하여 화면을 볼 수 있습니다. 이렇게 우리가 모바일 혹은 pc의 화면에서 보여지는 배율과 화면을 viewport라고 합니다. 즉 모바일 기기에서 여러 단말기의 해상도에 대응하기 위해 사용..