본문 바로가기

Front-end58

HTML - 인라인 텍스트 & 수정 인라인 텍스트 1. a 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정. 속성 의미 값 기본값 특징 download 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 불린(Boolean) href 링크 URL URL 생략 가능 rel 현재 문서와 링크 URL의 관계(Link Types) license, prev, next… target 링크 URL의 표시(브라우저 탭) 위치 _self, _blank(새로운탭) _self type 링크 URL의 MIME 타입 text/html… a { display: inline; } id는 고유한 이름 2. abbr 약어를 지정. (보통 title 속성을 사용하여 전체 글자나 설명을.. 2021. 2. 2.
HTML - 콘텐츠 구분 & 문자 콘텐츠 BODY 내 구조 개념 1. HEADER 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside ahju0011@gmail.com 010-1234-5678 header { background-color: tomato; margin: 10px; padding :20px; } header nav{ } header nav ul{ display : flex; } header nav ul li{ list-style:none; margin: 10px; } main{ display:flex; } section{ width:70%; background-color: tomato; margin:10px; padding:.. 2021. 2. 2.
HTML - 주요범위 & 메타데이터 블록(Block), 인라인(Inline) 1. 블록 요소 DIV, H1, P 사용 가능한 최대 가로 너비를 사용한다. 크기를 지정할 수 있다. (width: 100%, height:0;) 로 시작 - 내용이 포함되면 auto로 늘어남 수직으로 쌓인다. margin, padding 위, 아래 , 좌, 우 사용 가능하다. 레이아웃 2. 인라인 요소 SPAN, IMG 필요한 만큼의 너비를 사용한다. 크기를 지정할 수 없다. (width: 0%, height:0;) 로 시작 수평으로 쌓인다. 줄바꿈을 한 태그들은 띄어쓰기가 들어간다. 붙여서 작성하면 띄어쓰기 없어짐 margin, padding 위, 아래는 사용할 수 없다. TEXT (display:block) 는 인라인 요소를 블록요소로 , (display:i.. 2021. 2. 2.
CSS 기본 문법과 선택자의 역할 div { /*선택자*/ font-size: 20px; /*속성 : 값*/ color: red; /*속성 : 값*/ } - 선택자는 HTML에 CSS를 적용하기 위해 HTML의 특정 요소에 선택하는 사인이다. (div 태그에 디자인을 적용) 제목.. 본문.. h1 { color: red; } p { color: blue; } 속성과 값 div { color: red; /* 글자색은 빨강 */ font-size: 20px; /* 글자 크기는 20px */ width: 300px; /* 가로 너비는 300px */ margin: 20px; /* 바깥 여백은 20px */ padding: 10px 20px; /* 안쪽 여백은 위아래 10px, 좌우 20px */ position: a.. 2021. 2. 1.
HTML 기본문법 CONTENT 토끼와 거북이 옛날 옛적에 토끼와 거북이가 살았습니다 ... - 태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍이다. - 닫히는 태그는 태그 이름 앞에 /(슬래시)가 붙는다 - h1은 제목, p는 문단 속성과 값 안현주 - img는 이미지 삽입태그로, src라는 속성을 사용해서 삽입할 이미지의 경로를 지정, alt라는 속성을 사용해 이미지를 출력하지 못하는 상황에 이미지 대신에 보여진 텍스트 지정, 빈태그 - 는 의미를 가지지 않는 태그로 어떤 내용이든 묶어낼 수 있다. name이라는 태그 class를 추가 부모 요소,자식 요소 과일 목록 사과 딸기 바나나 오렌지 는 과 의 부모 요소 또한 은 의 부모 요소 반대로 과 은 의 자식 요소 또한 는 의 자식 요소 - 부모와.. 2021. 2. 1.
개요 HTML, CSS, JS의 차이점 HTML은 구조화 : 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다. CSS는 꾸미기 : 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당 JS는 생동감 : 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당 웹표준 웹 표준(Web Standard)이란 ‘웹에서 사용되는 표준 기술이나 규칙’을 의미하며 W3C의 권고안에서 나온 기술들이 여기에 해당한다. 대부분의 경우 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술을 표.. 2021. 2. 1.

티스토리툴바