Jeden Tag, aufrichtig und lustig.

선택자 종류 class선택자 .saw { color : gray ; } *class 속성 값에 여러개 값이 들어갈 수 있고, 띄어쓰기로 인해 구분이 가능하다. css *class선택자는 맨마지막에 등장한 class선택자가 우선순위를 가지고 있다. .hero { background-image : url ("~") ; background-size : cover ; } id선택자 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용한다. css #active { color : yellow ; } 선택자 우선순위 tag(element) < class < id < inline css **class나 id가 selector일때 태그와 결합할 수 있다. p { font-size: 20px; } .p-tag { color..

스타일 태그 및 속성 1. 태그 2. 속성 css 선택자와 속성 선택자(selector) : a 선언-효과(declaration) 1. 속성(property) : color, text-decoration 2. 값(value) : blue, none 선언-효과를 구분하는 역할 -> ; css속성 알아내는 방법 ? Googling! ex. css font size property h1 { font-size : 45px ; font-align : center ; font-family : Palatino, Serif ; } serif : fallback font (앞 폰트가 안나올때를 대비한 대체재 폰트, 모든 브라우저에서 지원하는 폰트다.) font-family : 폰트 스타일을 지정하는 속성이다. ** "T..

CSS Cascading Style Sheets 1. html의 정보전달기능 집중을 위해 2. 효율적인 디자인을 위해 3. 유지보수의 편리성을 위해 css =/= html ->html이 css문법에 맞게 해석하도록 명령한다. ex. * 중복되는 코드 제거하는 것 =코딩 잘 하는 법 *주석 다는 법 ->웹브라우저는 주석내용을 없는셈 침. **해당 태그나 class, id에 css 값이 있다면 해당 스타일을 우선순위로 적용한다.

웹호스팅 Internet > web index.html ---request---> (서버-서비스제공) 웹 브라우저 웹 서버 (클라이언트)

부모 자식 태그 부모태그 자식태그 목록 태그 목록태그 태그는 반드시 부모태그( or )를 가진다. *unordered list 1. 작약 *list 2. 수국 3. 튤립 부모태그 : 자식태그 : ->부모태그가 자식태그 그룹핑한다. ** 리스트 옆 점들을 제거하고 싶다면, list-style : none ; list-style속성에 none 값 적용. *ordered list ->과 다르게 자동으로 넘버링해준다. * crtl+마우스 왼쪽 커서 ->다른부분도 한꺼번에 선택 가능 * tab ->들여쓰기

HTML 구조 html 구조는 보통 아래와 같다. -> '문서유형이 html이다'라는 의미이다. 태그와 비슷하게 생겼지만 html 태그는 아니다. *모든 html elements들은 태그로 감싸져 있다. 본문 내용 *content는 태그 사이에 있어야 screen에 나온다. 안에 있는 내용들은 내용을 설명 한다.

링크 태그 링크 태그는 링크를 거는 태그이다. *anchor :닻 *h=hypertext : 링크 *ref=reference : 참조 링크주소 ex. "url ( www.~)" , "./contact.html"(현재 폴더에 있는경우, ' ./ '은 선택적으로) *url(Uniform Resource Locator) : 웹주소 ex. http://google.com 새 탭 띄우는 속성 target="_blank" 링크 툴팁 title="구경가기" 현재 페이지에서 쉽게 왔다 갔다 하고 싶을때, ex. profile top *html 설명서 https://www.w3.org/TR/2011/WD-html5-20110405/semantics.html#the-link-element

이미지 태그 *src=source의 준말 구름.jpg : url *닫는 태그 없음! (self-closing tag) cf) 뒤에 슬래시 있을수도 없을수도 있음 ex. ->o -> o *unsplash.com : 저작권 상관없는 이미지 사이트 : img안 뜰때 image묘사함 ex. photo of bread 태그 속성 ex. src 속성을 통해 태그에 의미를 부여함. 태그 속성(attribute) : 속성의 위치는 상관 없음 ex.

태그의 의미 모르는 태그는 검색을 통해 의미 파악이 가능하다. ex. 태그에 대해 알고 싶을 때, 검색 키워드 : html h1 tag - > 검색 결과 = > 는 제목 태그라는 것을 추론할 수 있다. * title, subtitle에 활용. * 다른 글자보다 두껍고 숫자가 커질수록 글자는 작아진다. * 띄어쓰기가 된다. 의미에 맞는 태그 효과적으로 정보를 전달할 수 있기 때문에, 의미에 맞게 태그를 사용하는 것이 중요하다. ex. html vs html : 줄바꿈 태그 * 줄바꿈 표시만 해주기 때문에 닫는 태그가 없다. : 단락표현 태그 * 단락을 표현하기 때문에, 단락 시작하는 처음부분과 단락 끝나는 부분에 열고 닫는 태그 표시 필요하다. 단락 내용 * 에 비해 는 '단락'이라는 정보를 가지고 있다...

HTML ? Hyper Text Markup Language 주로 웹페이지나 웹 어플리케이션을 만드는데 사용하는 언어 웹페이지의 뼈대를 만든다. web = public domain (무료) html 코딩 ->html 언어문법에 맞게 작성된 소스나 코드가 필요. 태그 태그는 단어를 설명한다. 단어 진하게 : 단어 밑줄 : 단어 기울임꼴(이탤릭체) : 단어 hello world! 태그 : content : hello world! element : hello world! ->html은 element(요소)의 합으로 구성됨. * 디렉토리=폴더 ctrl+o->파일 열기 ctrl+s->저장 * 독학 내용 정리