본문 바로가기

전체 글101

CSS 선택자 - 기본 선택자와 복합 선택자 CSS 선택자 전체 선택자 - ( * ) 사용 - 모든 요소 선택 * { font-size: 24px; color: #ccc; } 태그 선택자 - html 태그 이름으로 요소 선택 div { width: 200px; height: 100px; background-color: #333; } 클래스 선택자 - html 클래스 속성 값으로 요소 선택 - 앞에 마침표 ( . )를 붙여 클래스 선택자임을 표시 .box { background-color: #fff; margin: 20px; } 아이디 선택자 - html 아이디 속성 값으로 요소 선택 - 앞에 해시 ( # )를 붙여 클래스 선택자임을 표시 #box { display: flex; } 일치 선택자 - 선택자 두 개.. 2022. 11. 13.
CSS 기본 문법과 선언 방식 css 기본 문법 선택자 { 속성: 값; 속성: 값; } css는 스타일을 적용할 선택자를 작성하고 중괄호를 열고 닫아 그 사이에서 속성과 값을 입력하여 작성한다. 이때 속성 뒤에는 콜론( : )을 값 뒤에는 세미콜론 ( ; )을 작성한다. css의 선언 방식 css를 적용 하는 방식은 4가지 방법이 있다. 내장 방식 - html 문서의 head 태그 안에 태그를 사용하여 작성하는 방법. - 유지 보수 측면에서 추천되지 않음. 인라인 방식 - html 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음) - 우선 순위가 너무 높아서 추후에 유지 보수가 어려움. 2022. 11. 13.
HTML 기본 요소 정리 블록(상자) 요소 Division - 특별한 의미가 없는 구분을 위한 요소 Heading - 제목을 의미하는 요소 - (h1~h6) 숫자가 작을수록 더 중요한 제목을 정의 Paragaph - 문장을 의미하는 요소 Unordered List - 순서가 필요 없는 목록의 집합 Ordered List - 순서가 있는 목록의 집합 List Item - 목록 내 각 항목 => 사용법 인라인(글자) 요소 Span - 특별한 의미가 없는 구분을 위한 요소 - 이미지를 삽입하는 요소 - src / alt 는 필수 속성 Anchor - 다른 / 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 - target="_blank" : 새탭으로 페이지 이동 속성 - 화면 출력시 밑줄과 파란 글자로 표시 됨 Break - 줄바꿈.. 2022. 11. 13.
HTML 기본(2) 인라인 요소와 블록 요소 요소가 화면에 출력되는 특성에 따라 인라인(Inline)요소와 블록(block)요소로 구분된다. 인라인(Inline) 요소 - 글자를 만들기 위한 요소 Hello World 출력 => Hello World 대표적인 인라인 요소로 태그가 있다. 위 코드에 배경 색상을 지정한 모습 인라인 요소의 특징 요소가 수평으로 쌓임 줄 바꿈은 띄어쓰기로 인식함. 가로 / 세로 사이즈가 포함된 내용 크기만큼 자동으로 줄어듬. CSS로 가로 / 세로 너비 지정할 수 없음. margin(외부 여백) & padding(내부 여백) 속성 적용 시 좌 / 우 여백만 적용됨. 자식 요소로 인라인 요소는 가능하나 블록 요소는 가질 수 없음. 블록(Block) 요소 - 상자를 만들기 위한 요소 HelloWor.. 2022. 11. 11.
HTML 기본(1) html은 Hypertext Markup Language의 약어로 웹 문서를 만들기 위한 웹 언어의 한 종류이다. html은 태그를 사용하여 이루어진다. contents 괄호 사이에 태그를 입력하고 태그 사이에 내용을 입력한다. 이 전체를 요소(element)라 부른다. 이때 앞쪽 태그를 시작태그(열린태그) , 뒤쪽 태그를 종료태그(닫힌태그) 라고 한다. 종료 태그는 태그 앞에 슬래시( / )를 사용하여 태그의 종료를 알린다. 빈 태그 (empty) 어떤 태그들은 종료 태그가 존재하지 않기도 한데 이를 빈 태그라고 부른다. 그냥 사용해도 무리 없이 사용할 수 있긴 하지만 XHTML은 빈 태그를 허용하지 않으니 나중에 호환의 문제를 생각해서라도 태그 뒤에 슬래시( / )를 붙여서 종료를 표시해주는 .. 2022. 11. 11.