SperoSpera

[CSS] 문서 구조 관련 선택자

문서 구조의 이해 선택자와 문서의 관계를 이해하려면 문서가 어떻게 구조화되어 있는지를 알아야 한다. 부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 조상과 자손 조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다. 정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다. 조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 ..

[CSS] 선택자(selector)- 조합과 속성 선택자

조합 선택자는 서로 조합할 수 있다. 요소와 클래스의 조합 p.bar{...} p태그이면서 클래스로 bar가 있어야 규칙이 적용 된다 다중 클래스 .foo.bar{...} foo와 bar가 클래스 속성 안에 둘 다 있는 경우 해당이 된다. class="foo bar" 아이디와 클래스의 조합 #foo.bar {...}이경우는 아이디는 foo 클래스는 bar인 요소이다. 속성 선택자 속성 선택자는 태그에 속성을 이용해서 요소를 선택하는데 총 3가지가 있다. 단순 속성으로 선택 정확한 속성값으로 선택 부분 속성값으로 선택 단순 속성으로 선택 HTML에는 세개의 p요소가 있다. 그리고 class라는 속성이 있고 값으로는 "foo, bar, baz"가 있다. HTML 3번째에는 추가로 id가 title로 되어있다..

[CSS] 선택자(selector)-class,id 선택자

위 코드에서 소문자 css에는 빨간색 아래의 대문자 CSS에는 밑줄을 선언하고 싶다면 어떤 선택자를 사용해야할까? 요소 선택자와 전체 선택자로는 원하는 요소를 선택해서 규칙을 적용하기가 불가능하다. 왜냐하면 dt태그가 동일하기 때문이다. 그래서 이번에는 class 선택자와 id 선택자를 배움으로써 해결 가능하다. class 선택자 class선택자는 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법이다. 우선 html에 글로벌 속성 class와 class 속성에 값을 넣게 되면 우리는 class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수가 있다 css 입력창을 보면 주의할 점이 있다. 바로 foo 라는 속성값 앞에 "마침표( . )"를 꼭 넣어줘야 한다. ID 선택자 ID..

[CSS] 선택자(selector)-요소 선택자

완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야 한다. 그래서 CSS에서 선택자는 중요하다. 나중에 고급 레벨까지 활용하게 되면 생각보다 어려운 부분이니 잘 익혀둬야 한다. 선택자 중 기본이 되는 선택자는 4개이다. 요소 선택자 class 선택자 id 선택자 속성 선택자 이번 장은 우선 요소 선택자를 학습하겠다. 요소 선택자(태그) 선택자 중 기본이 되며 태그 선택자라고도 한다. 선택자의 부분에 태그의 이름이 들어가게 된다. h1{ color: red; } h2{ color: red; } h3{ color: red; } h4{ color: red; } h5{ color: red; } h6{ color: red; } 선택자는 그룹화가 가능하다. h1,h2,h3,h4,h5..

[CS] 명령어의 구조

기계어와 어셈블리어라는 명령어를 자세히 들여다보면 연산코드, 오퍼랜드, 주소 지정방식 3가지 개념이 있다. 연산코드와 오퍼랜드 컴퓨터 명령어는 '무엇을 대상으로 어떤 작동을 수행하라'는 구조로 되어있다. 더해라 = 100과 = 120을 빼라 = 메모리 xx안의 값과 = 메모리 xx안의 값을 저장해라 = 1을 = 메모리 xx에 빨간 글자는 명령의 작동, 즉 연산을 담고 있고 파란 글자는 연산에 사용할 데이터나 저장된 위치를 담고 있다. 이처럼 명령어는 연산 코드와 오퍼랜드로 구성되어 있다. 명령어가 수행할 연산을 연산코드(operation code) 연산에 사용할 데이터가 저장된 위치를 오퍼랜드(operand) 연산 코드는 연산자, 오퍼랜드는 피연산자라고 부른다. ex) push rbp mov rbp, r..

[CSS] CSS문법과 적용

CSS도 몇개의 규칙을 제외하고는 HTML과 마찬가지로 많은 속성과 그에 해당하는 값의 집합으로 이루어져 있다. 그래서 CSS의 구성 요소와 규칙에 대해 배우고 문서에 적용하는 방식을 학습해야 한다. CSS문법 CSS가 하는 역할은 html을 꾸며주는 역할을 한다. 그러면 필요한 것이 두가지가 있다. 첫 번째는 어느 요소를 꾸밀 건지 선택할 요소가 필요하고 두 번째는 그 요소를 어떻게 꾸밀건지 스타일의 관한 것이다. 선택자(selector) h1 {color: yellow; font-size: 2em;} 코드 맨 앞의 h1이 어느 요소를 꾸밀건지에 대한 '선택자' 이다. 'selector'라고도 많이 부른다. 선언(declaration) h1 {color: yellow; font-size: 2em;} 선..