블록 요소블록 요소는 새 줄로 시작하며 부모 요소의 전체 너비를 차지한다.한 줄을 100% 사용하며, 사용하지 못하는 공간은 margin으로 채운다.width, height, padding, margin, border 속성을 지정할 수 있다.div콘텐츠 분할(division) 요소를 말한다.여러 요소를 하나로 그룹화하는 제네릭 블록 컨테이너이다.CSS를 적용하기 전까지는 content나 layout에 영향을 주지 않는다.플로우 콘텐츠를 그룹화하거나 스타일을 적용하기 위해 사용한다.블록 요소의 종류, , ~, , , , , , , , , ,인라인 요소인라인 요소는 새 줄을 만들지 않고, 요소의 내용만큼의 너비를 차지하며, 다른 요소들과 가로로 나란히 배치된다.인라인 요소는 자신이 포함한 콘텐츠의 크기만큼만..

HTML5 의 정의MDN 문서에 의하면, HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어이다.기존의 HTML만으로는 웹서비스를 구성하는 데 한계가 있었지만, HTML5은 JavaScript API와 같은 새로운 기능이 도입하여 클라이언트와 서버의 통신을 지원하고 있으며, 외부 플러그인 없이도 웹 서비스를 제공할 수 있도록 발전하였다.플러그인이란 웹 브라우저와 연동되는 특정 프로그램으로, 사용자의 PC에 추가 설치해 웹 브라우저의 기능을 확장시키는 추가 프로그램이다. (예: Adobe Flash, Microsoft Silverlight) HTML5의 등장으로 CSS3, 자바스크립트 API를 통해 기능 확장을 하는 것이 가능해졌고, 웹 콘텐츠에..

태그란?태그는 이미지를 의미하는 태그로 이미지를 삽입할 때 사용한다.열고 닫는 태그 없이 라는 하나의 태그만 존재한다. (닫는 태그를 통해 범위를 나타낼 필요가 없기 때문에!)속성필수 속성 - src이미지를 삽입하려면 필수 속성인 src를 사용해서 삽입하려는 이미지 소스의 경로를 지정해야 한다.선택 속성 - alt이미지의 대체 텍스트를 지정하는 옵션이다.스크린 리더를 사용하는 사용자에게 이미지 대신 텍스트로 설명해줄 수 있다.이미지를 불러오는데 에러가 난 경우에도 이미지를 텍스트로 대체할 수 있다.

태그란?속성 - href 태그는 href 특성을 통해 다른 리소스에 접근할 수 있는 하이퍼링크를 만든다.이 태그로 표시되는 콘텐츠를 클릭하면 링크된 URL로 이동하게 된다.기본 구조앵커 태그href="URL" : 하이퍼링크(줄여서 '링크')될 URL을 지정하는 속성이다. 이 속성은 필수이다.URL: 다양한 형태의 리소스의 위치와 정보를 제공하는 고유한 주소를 말한다.하이퍼 링크: 인터넷에서 다른 리소스로 바로 접근할 수 있는 링크참고할 자료태그 - 올바른 이해와 사용 방법

순서가 없는 목록 요소 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그이다.은 순서를 변경해도 그 의미가 실질적으로 변경되지 않는다는 의미인 Unordered List(정렬되지 않은 목록)의 약자이다.항목의 순서가 중요하지 않은 항목들을 그룹화할 때 사용한다.이 요소의 하위 항목은 태그로 구성된 요소들이다.하위 항목 앞에는 글머리 기호가 자동으로 생성돼 표시된다.는 목록 내의 단일 아이템을 나타내는 태그이다.순서가 있는 목록 요소 순서가 지정되어 있는 항목(items)의 목록(list) 을 나타내는 태그이다.은 순서를 변경하면 그 의미가 실질적으로 변경된다는 의미인 Ordered List(순서가 지정된 목록)의 약자순서가 중요한 항목들을 그룹화할 때 사용한다.이 요소의 하위 항..

1강: 소개1. 리눅스 커널의 역할부팅 후, 커널은 CPU, 메모리, 디스크 등의 자원을 여러 프로세스와 어플리케이션이 공유할 수 있도록 관리어플리케이션이 보내는 시스템 콜(System Call) 을 처리2. 리눅스 운영체제 구조Kernel과 Userspace로 나뉜다.커널은 어플리케이션이 정상적으로 동작할 수 있도록 여러 기능을 제공어플리케이션은 시스템 콜 인터페이스를 통해 커널의 기능을 호출3. System Call어플리케이션이 리눅스 커널과 소통하는 방법시스템 콜은 라이브러리 함수와 유사하게 사용되지만, 커널의 기능을 직접 호출함시스템 콜은 라이브러리와 사용하는 방법이 동일 (ex- printf)4. System Call과 함수의 차이함수 호출:Userspace 내에서 userspace의 함수 호출..

텍스트 정렬가로 정렬 text-align텍스트를 가로 정렬할 때에는 text-align을 사용한다.이 속성을 사용하면 블록 요소나 표의 텍스트를 정렬할 수 있다.h1 { text-align: center;}Value (값)start Experimental쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같다.end Experimental쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같다.left인라인 콘텐츠를 line box의 왼쪽 모서리로 정렬한다.right인라인 콘텐츠를 line box의 오른쪽 모서리로 정렬한다.center인라인 콘텐츠를 line box의 가운데로 정렬한다.justify인라인 콘텐츠를 양쪽 정렬한다. 마지막 줄을 제외하고, line box의 왼쪽과 오른..

CSS에서 색상을 지정하기 위해 알아야 할 주요 속성과 값에 대해 알아보자.type(속성)colorcolor 속성을 사용하여 선택한 요소의 텍스트 색상을 바꿀 수 있다.텍스트뿐만 아니라 테두리와 같은 텍스트와 관련된 일부 속성에도 영향을 준다.background-color선택한 요소의 배경색을 변경해준다.배경색은 컨텐츠뿐만 아니라 요소의 패딩 영역(padding) 에도 적용된다.backgroundbackground는 background-color 보다 훨씬 많은 일을 한다.배경 색상뿐만 아니라, 배경 이미지, 그라디언트(gradient), 배경 반복(repeat) 등의 옵션을 설정할 수 있다.배경색을 바꾸는 것 뿐만 아니라 배경 이미지, gradient 등을 설정할 수 있다.value(값)색상명 사용브라..

HTML 문서에서 CSS를 적용하는 방법에는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트가 있다. 각각의 장단점과 특징을 이해하고 적절한 상황에 맞게 사용해야 한다! 인라인 스타일(Inline Style)Inline-styleHTML 요소에 직접 style 속성을 사용해 스타일을 작성하는 방법이다.특징같은 태그라 하더라도 스타일을 공유할 수 없다. (복사를 해야함)스타일을 수정하려면 일일이 찾아서 수정해줘야 한다.유지보수성이 낮고, 코드가 지저분해지기 쉽다.정리좋은 방법이 아니다.특정 요소 하나만 임시로 스타일을 지정해야 하는 경우 사용한다.내부 스타일 시트(Internal Style Sheet) Internal-style Internal-style Internal-style 태그를 ..

CSS가 하는 일CSS는 Cascading Style Sheets의 줄임말로, HTML 요소의 스타일을 지정하여 사용자에게 문서를 시각적으로 보이는 형태를 만드는 역할을 한다.프로그래밍 언어는 아니지만, 웹 페이지의 요소를 꾸미고 배치하는 데 사용된다.규칙 기반 언어로, 특정 요소 또는 요소 그룹에 적용할 스타일을 정의하는 규칙을 작성한다.여기서 "규칙"이란 CSS의 특정 문법에 따라 작성된 스타일 선언을 의미한다.CSS의 규칙거의 모든 CSS는 아래와 같은 기본 패턴을 갖는다:선택자 { 속성: 값;}구성 요소 설명선택자(Selector): 스타일을 적용할 HTML 요소를 지정한다.속성(Property): 어떤 스타일을 적용할지를 정의한다. (예: 색상, 크기 등)값(Value): 속성에 설정할 값을..

HTML 문서라면 갖춰야 하는 필수적인 구조가 있다. 이 구조는 만드는 모든 HTML 문서에 필수적으로 들어가야하는 표준화된 마크업이다. HTML 문서 제목 콘텐츠는 body 태그 안에!HTML 5(HTML의 최신 규격)를 사용하고 있다는 표식이다. 태그루트 요소로, 문서의 최상위 요소를 의미한다.문서의 모든 콘텐츠는 html 태그 안에 포함되어야 한다.lang 속성을 사용해 문서의 언어를 명시한다.html 태그의 안에는 하나의 요소와 하나의 요소가 들어가 있다.head 태그메타 데이터 요소 라고 부르며, 페이지 상에 보이지 않는 내용을 담고 있다.브라우저와 검색 엔진이 페이지를 이해하기 위해 필요한 메타 데이터를 포함한다.meta 태그문서의 메타 데이터를 설정한다.인코딩, 뷰포트 설정, SE..

~ 요소부터 까지는 HTML에서 제목이나 섹션 제목을 표현하기 위해 사용되는 태그이다. 보기에는 비슷해 보이지만, 각 태그는 문서의 계층 구조를 표현하는 중요한 의미를 가진다.총 6가지 제목 태그: 페이지의 최상위 제목을 나타내는 태그. 한 페이지에 하나만 존재해야 한다. 최상위 주제가 두 개일 수는 없기 때문이다. ~ : 하위 섹션 제목을 나타내는 태그이다.는 의 하위 제목이고, 는 의 하위 제목이다. 이와 같이 계층 구조를 형성한다.제목 계층의 중요성와 이 없으면 는 존재할 수 없다. ~ 가 없다면 는 존재할 수 없다.제목 단계를 뛰어넘으면 사용자에게 혼란을 줄 수 있다.예를 들어, 를 사용하는데 앞에 가 없는 경우이다.접근성과 SEO에 미치는 영향제목 태그는 웹 페이지의 계층 구조를 나타내기 때문..