본문 바로가기

분류 전체보기

 (189)
[CSS] 조합선택자 (Combinators Selectors) 조합 선택자 CSS에서는 요소를 선택자로 표현할 수 있는데 이러한 요소들을 2개 이상 묶어서 특정 규칙을 이용하여 사용하는 선택자를 뜻한다. Element 관계는 아래와 같이 나눌 수 있다. - 수직 구조( 포함관계 ) : 형제, 조상, 부모, 자식(child), 자손(descendant) - 수평 구조( 인접관계 ) : 형제(sibling) 자손 요소(공백) : 기준 요소에 포함되는 모든 요소에 적용 /descendant 자식 요소(>) : 기준 요소에 직계로 포함되는 요소만 적용 / child 형제 요소(+) : 기준 요소의 바로 다음 요소(선택지와 일치하여야함)에 적용 /adjacent sibling 형제 요소(~) : 기준 요소의 바로 다음 요소에 적용 /general sibling ** 선택지와..
[CSS] CSS기초 (기능, 문법, 선택자) CSS의 정의 CSS(Cascading Style Sheet)는 HTML로 작성된 문서를 표현하는 방법을 정해주는 언어로 디자인, 레이아웃 등을 담당한다고 볼 수 있다. CSS는 여러 개의 HTML 요소에 공통 적용하고 제어할 수 있어 효율적이다. 예시 짱구 철수 유리 훈이 맹구 위와 같은 코드가 있을 때 이와 같은 css 구문을 입력하여 단락 p인 모든 요소를 한 번에 적용시킬 수 있다. 문법 selector(선택자) {Property:value;Porperty:Value;Property:Value;} selector(선택자) { Property:Value; Property:Value; Property:Value; } Selector(선택자) : 스타일을 지정할 대상을 가리킴 기본적인 선택자(Selec..
변수의 이름 짓기, 변수명 표기법 (Naming Rule) 변수의 이름을 지을 때엔 여러 단어를 사용해서 정의해야 할 때가 많다. Ex) 간단한 한 단어를 사용하는 경우 - title, heading, paragraph... : 이러한 경우 Naming이 중복될 여지가 많음 여러단어를 조합해서 사용하는 경우 - contents-title, list-title... : 이러한 경우 Naming이 중복될 여지가 적음 : 이름이 길어짐 => Naming을 여러단어로 조합해서 사용하는 경우 단어별로 구분되도록 해야 함 Naming은 공백을 허용하지 않음. Ex) contentstitle => contents title (X) contentstitle => contents-title (O) Naming 방식 표기법 예시 설명 케밥 표기법(kebab case) conten..
[HTML] HTML5 블록 요소, 인라인 요소(Block Element, Inline Element) Inline & Block HTML의 태그는 블록 요소와 인라인 요소로 나눌 수 있다. 둘의 차이는 화면 출력의 성질이다. 블록성질의 태그는 화면의 한줄을 다 차지하는 것 인라인성질의 태그는 내용물의 크기만큼만 차지하는 것 블록 요소(Block Element) , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 특징 하나의 그룹 컨텐츠는 한줄씩 표시 해당 줄의 전체너비를 채움 인라인 요소 모두 포함 가능(Block, Inline, Text) 대표적인 block 태그 div(division) - 특별한 기능이나 의미는 없으며 태그들을 단순 그룹화함 block tag로 선언한 element는 한줄을 전체 차지하는것을 볼 수 있다. 인라인 요소(Inl..
[HTML] HTML파일 경로(File Paths, 절대파일경로, 상대파일경로) 1.절대 파일 경로(Absolute File Paths) 절대 파일 경로는 전체 URL이다. 특징 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식 주소의 길이가 길다 이전을 하게되면 주소의 업데이트가 반드시 필요 2.상대 파일 경로(Relative File Paths) 상대 파일 경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식함 위 예제에서는 현재 웹 루트에 있는 images 폴더의 파일을 가리킴 (이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지 등을 따져보고 경로를 지정해줘야함) 만약 문서와 이미지 파일이 같은 경로에 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않으나 다른 폴더에 있다면 이 다른폴더에 위치를 지정해줘야함 상대 경로 표기 방식 ./ : 현..
[HTML] HTML5의 인코딩(Charset) 인코딩 인코딩이란 우리가 작성한 코드를 컴퓨터가 해석할 수 있도록 번환하는 작업이다. HTML 페이지를 올바르게 표시하기 위해선 웹 브라우저의 인코더 형식을 맞춰주어야 한다. 방법 문서 사이에 위 명령어를 입력하면된다. 오늘날 인터넷에서는 UTF-8 인코딩 방식을 가장 많이 채택하고 있어서 대부분의 charset 속성 값을 utf-8로 지정한다. 역사 과거에는 ASCII, ANSI, EUC-KR, CP949등 다양한 캐릭터셋이 있었고 이런 문자 코드들은 한정된 범위의 문자를 갖고있어서 다른 나라의 문자들을 표시할 수가 없었다. 이 때문에 전 세계의 모든 문자들을 컴퓨터에서 표현하고 다룰 수 있게 설계된 표준 규격이 바로 유니코드(Universal Coded Character Sety)이다. 이 유니코드 ..
[HTML] HTML5 시멘틱 태그이란 (Semantic Elements) 시멘틱(Semantic)이란? 사전에 검색하면 '의미의, 의미론적인' 이란 결과를 얻을 수 있다. HTML에서는 웹페이지를 설계할 때 상단, 중단, 하단 등과 같이 구역을 그룹화하여 작업을 하는데 HTML5에서는 구역별 의미를 가진 이름을 고유한 태그로 도입하였다. 그 덕분에 브라우저와 개발자는 태그 안에 들어간 내용의 의미를 유추해가며 작업을 할 수 있다. Semantic Element : 의미적 요소 그룹화 의미를 부여하지 않는 Grouping태그와, 의미를 부여하는 Grouping태그로 나눌 수 있다. div, span : 의미를 부여하지 않고 단순 Grouping header, section : 의미를 부여하면서 Grouping - 특정 영역에 대한 의미를 부여하여 위의 header, sectio..
[HTML] HTML 북마크 만들기 북마크는 긴 웹페이지에서 유용하게 사용될 수 있다. 방법은 문서에서 하이퍼링크를 걸 때와 같다. 코드 내용 내용으로가기 예시 챕터 4 첫번째로, 북마크를 달고자 하는 대상의 태그에 id 속성을 만들어준다. 챕터 4로 가기 그리고 북마크가 필요한 부분에 id속성 값을 좌표로 하이퍼 링크를 달아준다. (id속성 값에 #을 꼭 넣어주어야 한다.) 챕터4로 이동 외부 링크를 통해서도 이동할 수 있다.

티스토리툴바