디자이너 노트

CSS - 웹페이지를 꾸며주는 언어 - 정보와 디자인의 엄격한 분리 - HTML의 본질: 정보(전자 출판을 위한 언어, 정보를 생산하고 보관하는 것) 선택자 선택자는 CSS의 주어. 어떤 태그를 디자인 하기 위해서는 디자인하려는 태그를 1. 선택하고 (선택자) 2. 선택한 대상에게 효과를 줘야 합니다 (선언) 선택자의 종류 (id) 많은 리스트 중에 하나만 수정하고 싶을 때 CSS를 html에 입력한다. CSS에선 #select로 받아준다. 부모 자식 선택자 1. ul li {} ul 아래있는 li에 모든 css 적용 2. ol>li {} ol의 자손들에게 적용, but 위의 사진은 ol이 2개 있기 때문에 아래 3번을 통해 해결 3. #lecture>li {} 가상 클래스 선택자 id 선택자, 태그 선..

비디오 삽입 1. 비디오 삽입 방법 img와 달리 온전한 video 태그 안에 넣는다. 브라우저마다 동영상을 지원하는 포맷 및 코덱이 다르다. 따라서 각 웹에 맞는 영상의 태그를 삽입해야 한다. 2. 비디오 태그 내에 'controls'를 입력하면, 재생 멈춤이 떠 조절할 수 있다. Can I use.com 내가 현재 사용할 수 있는가 없는가 사용하는 기능. 내가 이 기능이 필요한데, 현시점에서 이 기능을 사용하는게 타당하는가? HTML5의 입력양식 새로운 제출 양식들 어떤 정보를 서버쪽으로 전송하는 것. HTML5의 새로운 제출양식 내가 원하는 정보만 입력할 수 있게 규제하는 것 ex)

웹 개발자 도구 HTML이 잘 돌아가는지 확인할 수 있다. 크롬 - 오른쪽 마우스 클릭 - 검사 모바일 코딩 결과가 작은 스마트폰에서도 잘 보이게 할 수 있는 방법 태그 안에 를 넣는다. 기존 웹사이트에서는 그대로 보이지만 모바일 화면에선 모바일에 최적화되어 나타난다. 외부문서삽입 - iframe 태그 안에 넣는 . iframe은 보안이 중요하다. sandbox 태그를 넣으면 자바스크립트의 경고창이 안 뜬다. 실전에서는 보안을 제대로 예방해야 한다.

이번 시간엔 인류의 지식을 담아내는 그릇 HTML을 더 깊게 배울 예정이다. HTML을 정보답게 하는, 왜 HTML이 정보를 담아내는 그릇인지 설명하겠다. HTML - Font(퇴출 태그) HTML에는 약 150개의 태그가 있다. 현재 폰트 태그는 퇴출이 되었는데 여전히 많이 사용하고 있다. 하지만 CSS라는 별도의 언어를 굳이 사용함으로써 정보로서의 HTML을 명확히 제공하는 것을 지향한다. Meta : 어떤 데이터를 설명하는 것 이 웹페이지의 저자는 누구인가, 검색할 때 사용할 수 있는 키워드는 무엇인가. ex) meta charset-utf8 HTML - 의미론적인 태그 (semantic) 개인보호정책, 회사소개같은 작게 들어가는 것 문서의 네비게이션 항목 article 본문 aside 광고와 같이..

: 비밀번호를 입력할 수 있다. : 텍스트를 길게 넣을 수 있다. (cols는 옆으로 커지는 것, row는 위로 커지는 것) *name은 서버가 전송될 때 id, password로 전송된다. form: dropdown list 제한된 공간 안에서 여러개를 선택할 수 있게 하는 것. 왜 'value'를 사용할까? 사람들이 보기 편한 정보는 '붉은색', '검은색', '파란색'인데, 컴퓨터가 이해할 수 있는 정보는 'value'로 따로 알려준다. *사용자가 여러개를 선택하고 싶을 땐 어떻게 해야할까? button hidden field

태그는 단락 줄바꿈 가능 는 앞뒤로 가두는 게 아니라 열리는 태그 하나만 (닫을 필요 없다) => Ex) alt= alternative text (이미지가 안 뜰 때 대안의 문자로 뜬다.) alt는 꼭 쓰는게 좋다 ! HTML - 표 = table data 같은 행끼리는 그룹핑을 하기 위해 로 묶어 줘야 한다. 또, 그 전체를 로 묶어 줘야 한다. td를 th로 표현할 수 있는데, 이런 경우 head임이 명확히 드러난다. 간단하게 총정리 : table row : table header : table data : 테이블 헤더의 그룹화 표 병합 rowspan 병합될 td는 지워 없앤다. 병합될 td를 지워 없앤다. (row)로 되어있는 -> 자기 자신을 포함한 3임.

1994, CSS의 등장 HTML은 정보를 표현하는 언어 -> 아름답지 않아 한계가 있었다. HTML 위상이 격상하며 잘 정리하는게 중요해짐 CSS의 기본 li { color:red } => 본문에 있는 모든 li의 컬러를 빨간색으로 할게요 스타일 내에서 li는 선택자 원하는 값인 red는 결과 ; 세미콜론 표시로 적용하고 싶은 추가 요청을 구분 위를 예시로 보면 1. color : red; 2. text-decoration: underline;

command 누른 채로 클릭하면 다중 체크 가능

HTML : (HyperText Markup Language) 기계와 사람이 이해할 수 있는 공통의 언어 (세상에서 가장 중요하면서 가장 쉬운, 가성비가 아주 높은 언어) 하이퍼텍스트를 가장 중요한 특징으로 하는 (하이퍼텍스트란? 링크) 마크업이라는 형식을 가진 (태그같은 문법을 포괄적으로 이야기함) 컴퓨터 언어 언어 = 약속 Hello = '안녕'이라는 약속 컴퓨터 언어도 사람과 기계가 함께 이해할 수 있는 약속이다. 그것이 컴퓨터의 언어이다. 사용 에디터 : Brakets 왼쪽: 프로젝트에서 사용할 파일들의 목록 오른쪽: 코드를 작성할 곳 태그 : 웹 전체를 틀어 가장 기본적이고 보편적인 문법 HTML의 가장 기본적인 문법 : 태그 시작 태그 끝나는 태그 옷살 때 '태그'라는 이름을 붙인다. 고로, ..

귀국 기념으로, 지금까지 마주보지 않았던 코딩 공부를 다시 시작하기로 하였다. 아무래도 일지를 쓰면 좋을 것 같은데 일관성이 없더라도 내 편한대로 올리고 싶어 티스토리를 이용한다. 늘 그렇듯 간단하게 맛보기로 시작한다. 강의는 네이버에서 edwith를 들었다. 첫날이라 을 설명해주셨다. 웹브라우저 ㅡ 웹서버 클라이언트 ㅡ 서버 고객 ㅡ 고객에게 제공하는 점원 정보 요청 ㅡ 요청에 의한 응답을 보여줌 본 수업에서 등장한 핵심 인물은 영국의 컴퓨터 과학자 '팀 버너스리'이다. 그는 www, HTML, url을 고안하며 웹을 탄생시킨 컴퓨터계의 아버지이다. HTML을 만드는데, 작업의 양 자체는 3개월밖에 되지 않았다. 하지만 역사적으로 흐르고, 다양한 기술이 붙고, 그 영향력이 커지면서 덩치가 매우 커지게 ..