전체 글

[CSS] CSS 선택자 종류와 우선순위 (작성중)

CSS 선택자 종류 기본 선택자 전체 선택자 (Universal Selector) : * HTML문서 내의 모든 요소(태그)를 선택하는 선택자 보통 margin 또는 padding 값 초기화 등 기본값을 설정할 때 사용한다. 사용 시 문서 내의 모든 요소를 읽어야 하기 때문에 페이지 로딩 속도와 관계가 있어 자주 사용하지 않는 편이 좋다. * { margin: 0; padding: 0; } 타입 선택자 (Type Selector) : Type 기본 선택자로 태그 이름을 그대로 사용하는 선택자 특정 태그로 마크업된 모든 요소를 선택한다. div { color: blue; } 클래스 선택자 (Class Selector) : .Class .기호에 클래스 이름을 붙여서 사용하며 특정 class 속성값을 사용하는..

[CSS] Flexbox : 자식 박스의 방향과 크기 설정

Flexbox란? Flex(Flexible)는 "잘 구부러지는", "유연한"이라는 뜻의 사전적 의미를 가지고 있다. Flexbox layout이란 CSS의 display 속성 중 하나로, 수평적으로만 배치되는 것이 원칙인 일반적인 레이아웃(block, inline 등)과 달리 flexbox layout은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다. (사이즈를 모르거나 크기가 유동적이어야 하는 상황에서 유용) Flexbox는 작은 크기의 레이아웃이나 모바일 디바이스에 적합하다. (큰 스케일의 레이아웃 : Grid 속성) Flexbox 속성 Flexbox 속성은 속성마다 속성을 지정하는 위치가 다르며 부모 요소에 적용해야 하는 속성과 자식 요소에 적용해야 하는 속성으로 구분할 수 있다. 부모 요소에 적..

[CSS] box-sizing : 박스 크기 방식 설정

box-sizing box-sizing이란 박스 모델의 너비와 높이를 계산하는 방식을 변경하는 속성 box-sizing 사용 이유 width와 height는 기본적으로 컨텐츠 박스 크기에만 적용된다. 따라서 테두리(border) 또는 안쪽 여백(padding)이 있는 경우에는 컨텐츠의 크기 + @로 테두리나 안쪽 여백을 고려해야 하기 때문에 어려움을 느낀다. 여기서 box-sizing의 value를 border-box로 지정하면 width와 height를 테두리, 여백을 포함한 크기로 지정할 수 있다. box-sizing values / box-sizing 속성 값 content-box CSS 표준의 정의한 초기 기본값으로 width와 height 속성이 컨텐츠 영역만 포함한다. selector { bo..

[CSS] CSS란?

CSS란 무엇일까? CSS는 Cascading Style Sheets의 약어로 HTML, XHML, XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 집을 짓는다고 가정한다면 HTML은 집의 구조(뼈대)를 담당하고, CSS는 인테리어를 담당한다. (개인적인 생각) CSS 필요성 HTML 하나로 문서의 뼈대와 스타일을 같이 한다면 1개의 디자인 변경이 이루어질 경우 관련된 모든 문서를 전부 수정해야 하는 번거로움이 있다. 따라서 구조와 디자인을 분리하기 위해 만들어진 것이 CSS! 태그 내에 style속성 등 디자인에 필요한 요소들이 분리되기 때문에 코드의 가독성이 좋다. 선택자로 묶어 관리하기 때문에 유지보수 용이 CSS 적용방법 CSS를 적용하는 방법은 3가지가 있다. Inline..

[TIL] 20220628

오늘 할 일 [코드스테이츠] 페이지 레이아웃 Flexbox : 정리 완료 [코드스테이츠] 웹 앱 화면 설계 백준 기본수학1 2775번 : 부녀회장이 될테야 문제를 풀면서 뭔가 막히는 순간이 찾아오는게 잦아지고 있다... (for문으로 2차원 배열 이용해서 풀기 전에 for문을 많이 이용하면 안 좋다고 해서... for문 없이 풀어보려고 계속 고민하는데..결국 실패하고 위의 방법으로 어찌저찌 풀었다.. 스스로 현타와서 java 알고리즘 책을 구매했다... 도착하면.. 조금씩이라도 공부해야지..) 내일 할 일 [코드스테이츠] 클론 트위터(트위틀러) 페어 실습

[HTML] 시멘틱 태그(Semantic Tag)

Semantic Tag란 HTML5로 넘어오면서 태그의 가장 큰 변화는 시멘틱 태그라고 하는데, 이 때문에 HTML5 웹 페이지를 시멘틱 웹 페이지라고도 한다. Sementic의 사전적 의미는 '의미의', '의미론적인'이라는 뜻을 가진 형용사로 Semantic Tag란 의미가 있는 태그를 의미한다. Semantic Tag 필요성 검색엔진최적화(SEO) : 검색 엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 의미없는 div 또는 span 과 같은 태그는 지양하고, 의미에 맞는 태그들을 사용하는 것이 좋다. 시각장애가 있는 사용자가 스크린 리더를 사용하여 웹 페이지를 탐색하는 데 도움이 되는 표지판으로 사용할 수 있다. 코드의 트리 구조를 쉽게 파악할 수 있으며, 가독성이 좋다..

[HTML] HTML이란?

---------- 공부한 내용 정리 ---------- HTML의 사전적 정의 HTML은 Hyper Text Markup Language의 약자로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어이다. 웹 페이지의 구조를 설계하고 내용을 기술할 때 사용하며 웹 페이지를 위한 마크업 언어라고 할 수 있다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타낼 뿐만 아니라 링크, 인용과 같은 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 꺽쇠 괄호에 둘러싸인 Tag로 구성되어 있는 HTML 요소 형태로 작성한다. .html 확장자를 사용 HTML의 태그 태그의 사전적 의미는 꼬리표라는 뜻을 가지며 html에서 ..

[MySQL] 데이터 조회 : SELECT (기본)

쿼리문의 실행 순서 SELECT FROM WHERE GROUP BY HAVING SELECT (서브 쿼리) ORDER BY LIMIT 열(Column) 전체 조회 mysql> SELECT * FROM "DB명"."테이블명"; -- DB가 선택되어 있다면 DB명은 생략가능하다. mysql> SELECT * FROM "테이블명"; [SELECT] : 데이터를 조회할 때 사용하는 예약어 [*] : '모든 것'을 의미하며, *가 사용된 위치가 열(컬럼)을 나타내는 위치이므로 모든 열(컬럼)을 의미한다. [FROM] : 테이블에서 내용을 가져온다는 의미의 예약어 ["DB명"."테이블명"] : DB안에 있는 테이블을 의미한다. 해당 테이블의 모든 열(컬럼)들을 조회한다. 특정 열(Column) 조회 -- 단일 컬럼..