본문 바로가기

frontend37

[CSS] Grid 활용법 📝 그리드 사용법 그리드 선언 그리드는 display 속성을 사용해 설정할 수 있다. 설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정 가능하다. 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다. 예시) .grid-container { display: grid; /* grid 또는 inline-grid 설정 가능 */ } grid cell 그리드를 선언한 레이아웃 태그 내부에 포함한 자식요소는 grid cell로 변환된다. (자식 요소가 아니면 grid cell이 아닙니다) grid cell에 설정된 float 속성은 적용되지 않는다. 💡 grid cell에 설정된 display 속성은 모두 무시된다. 💡 요소가 아닌 텍스트가 자식으.. 2023. 2. 9.
[HTML] HTML 기본 태그 🤔 블록 레벨 요소와 인라인 요소 블록 레벨 요소 마크업을 할 때 줄이 바뀌는 특성이 있다. 인라인 요소 블록레벨 요소와 달리 줄 바꿈 특성이 없다. 즉, 행이 바뀌지 않고 한 줄로 출력 된다. 블록 레벨 요소와 인라인 요소의 특징 요소 유형 특징 블록 레벨 요소 1. 줄 바꿈이 일어난다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 인라인 요소 1. 줄 바꿈이 일어나지 않는다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 3. 블록 레벨 요소를 자식 요소로 포함 할 수 없다(예외 : a태그) 📑HTML 기본 태그 P태그 HTML 문서에서 단락(paragraph) 을 정의할 때 사용하는 태그다. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함 할 수 없다... 2023. 2. 8.
[CS] 컴퓨터 구조 🖥 컴퓨터 시스템 구성 하드웨어(Hardware)와 소프트웨어(Software)로 구성. 소프트웨어(Software) 운영체제와 응용 프로그램 같은 우리가 컴퓨터를 틀어서 보는 Window 같은 친구들이 소프트웨어에 속한다. 하드웨어(Hardware) 모니터, 컴퓨터 기억장치, 그래픽카드, CPU 같은 물리적 장치들을 뜻한다. 👨‍🦳 폰노이만 구조 폰노이만 순서도를 최초로 사용했으며, 게임이론을 최초로 제안한 와중에 현 컴퓨터 구조를 만든 슈퍼 천재. CPU, 메모리, 프로그램으로 구성된 현 컴퓨터 구조를 제안. 폰노이만 구조 이전 : 다른 작업을 하려고 할때 마다 스위치 설치, 전선 재배치하여 데이터 전송, 신호 처리를 해줘야 했다. 폰노이만 구조 이후 : 소프트웨어만 교체하면 The End~! 💻 컴.. 2023. 2. 8.
[CSS] CSS 첫걸음 📖 CSS 정의 Cascading Style Sheets의 준말. HTML이 웹페이지의 내용을 담당한다면, CSS는 웹페이지의 디자인을 담당한다. 정의하는 방법으로는 내부 스타일시트 외부 스타일시트 인라인 스타일시트 등이 있다. 🤔 CSS를 적용하는 3가지 방법 ✅ Inline 방식 해당하는 Tag안에 style 속성을 통해 적용하는 방법 하이 💡 css 속성뒤에 마무리로 세미콜론을 넣어준다. 제일 마지막 속성에는 세미콜론을 안 넣어도 동작은 하나 넣어주는 게 명시적으로 좋다. ✅ Style tag 방식 head 태그 안에 style태그를 선언하여 적용하는 방법 하이 💡 style tag는 왜 head 안에 선언해야 될까? html 문서는 위에서부터 아래로 읽기 때문에 style tag가 body태그의 .. 2023. 2. 7.