html 7

21. 그리드 레이아웃 그리드(grid)란 격자, 바둑판을 의미한다. 그리드 레이아웃 웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 의미 시각적으로 안정된 레이아웃 유지 업데이트 편리 자유로운 요소 배치 그리드 레이아웃 속성 display 속성 grid 컨테이너 안의 항목을 블록 레벨 요소로 배치 inline-grid 컨테이너 안의 항목을 인라인 레벨 요소로 배치 칼럽, 줄 지정 속성 grid-template-columns 컨테이너 안에 배치할 칼럼의 크기와 개수 지정 grid-template-rows 컨테이너 안에 배치할 줄의 크기와 개수 지정 #parent { display: grid; grid-template-columns: ..

17. 반응형 웹 반응형 웹 뷰포트(viewport) 미디어 쿼리 반응형 웹 PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌 사용자에게 편리한 웹 사이트를 제공하여 사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있다. 모든 사이트를 반응형 웹 사이트로 만들 필요는 없고, 사이트의 사용 목적에 맞춰서 결정하면 된다. 반응형 웹 사이트에 적합한 경우 | PC용 웹 사이트 사용자와 모바일용 웹 사이트 사용자의 접속 빈도가 비슷한 경우 모바일용 사이트에 적합한 경우 | 사용자가 이동 중에 모바일 기기로 접속하는 경우가 많은 사이트..

14. HTML5 테이블 태그 테이블 생성 태그 표 전체를 담는 컨테이너 표 제목 표의 머리(head) 생성 표의 본문(body) 생성 표의 꼬리(foot) 생성 행(row), 여러 ,를 포함 데이터 셀 생성. 의 자식으로 들어가야 한다. 열(column) 제목 셀 생성. td와 같은데 글자가 bold체로 나온다. 꼭 제목에 쓸 필요는 없다. bold체가 필요한 다른 셀에도 사용 가능 테이블 병합 | rowspan과 colspan은 기준이 되는 셀에 작성해야 한다. rowspan 셀을 세로로 병합. row를 합친다. colspan 셀을 가로로 병합. column을 합친다. cf.) border-collapse: collapse; | 표의 border를 하나로 합침 15. 목록 태그 리스트 종류 순서 있는..

01. 웹(Web)이란 무엇인가 웹(World Wide Web) | 인터넷으로 전 세계 컴퓨터들을 거미줄처럼 연결한 정보 소통 망 한 컴퓨터에서 만든 문서(웹 문서)를 다른 컴퓨터에서 쉽게 볼 수 있게 하는 것 웹 서버 | 클라이언트의 요청을 받아 웹 문서 전송. 데이터 저장소 웹 클라이언트 | 사용자 인터페이스(웹 브라우저). 웹 서버로부터 데이터를 다운로드해 사용자에게 보여준다. 사용자가 웹 서버에 데이터를 업로드할 수도 있음. 인터넷 | 웹이 나오기 훨씬 이전부터 존재한 컴퓨터 연결 네트워크. 모든 컴퓨터가 IP 주소를 부여받는다. 웹은 인터넷을 활용하는 응용 서비스 중의 하나. 02. HTML 기초 표준화된 태그로 웹 페이지를 작성해야 한다. 태그 | 요소를 만들 사용하는 기호. 요소 | 시작 태..

노마드 코더의 코코아톡 클론코딩 강의를 듣기 시작했다. 챌린지도 접수 완료! 챌린지 시작 전까지 예습하고, 테마라던가...? 생각해보면 좋을 것 같다. 참고 사이트는 w3school보다는 mdn을 사용해라 검색어 : html tags mdn HTML : Markup(content) Language CSS | 디자인과 스타일을 위한 언어 JavaScripte | 프로그래밍 언어. 웹사이트를 동적으로 만들어줌 list 리스트 태그 안에 따로 로 만들어줘야 함 ol(ordered list) | 순서가 있는 리스트. type으로 목차 첫 머리의 스타일을 바꿀 수 있다. ul(unordered list) | 순서가 없는 리스트 a | anchor(닻) href | HTTP reference 혹은 hyperlink..

○개발자를 위한 Windows 셋업 강의 (반쯤 듣다가 말았다... 유튜브 생활코딩 강의만 들었던 나에게는 리눅스의 개념도 잘 모르겠고, 그냥 Visual Studio Code를 설치하고 보기 편하게 커스터마이징 한 것으로도 괜찮았던) pwd는 현재 위치 리눅스 root에서 mnt로 진입하면 윈도우로 들어가게 되는 것. 보통은 home/사용자명(sognociel)로 들어가 있음. 권장하는 건 파일들을 윈도우에 저장해 놓는 것. 다만 윈도우에서 리눅스 파일을 건드리지 말 것. ○바닐라 JS로 크롬 앱 만들기 JavaScript는 HTML을 읽어오는 것이다. 읽어오는 것뿐만 아니라 HTML을 변경할 수도 있다. const = 변수 값 바꿀 수 없음 let = 변수 값 바꿀 수 있음 (let myName="n..

생활코딩 사이트 강의 내에서 알려주신 사이트 최초의 웹사이트 Advanced WEB RANKING HTML Study : html 태그들이 사용되는 랭킹 DISQUS : 댓글기능 추가 tawk.to : 실시간 채팅 기능 추가 caniuse : html 태그들이 각각의 웹 브라우저에서 지원되는지 알려줌 HTML, CSS는 컴퓨터 언어 JavaCcript는 컴퓨터 프로그래밍 언어 프로그램 : 순서. 프로그래밍 언어는 순서를 만드는 언어. 만들어진 웹에 자바스크립트를 이용하여 사용자와 상호작용할 수 있게 만듦. ★WEB1 - HTML & Internet 나의 문제를 코딩으로 해결하려는 엔지니어. 이해력보다 공감력이 중요함 기획-구현의 단계를 거친다. 무엇인가를 만들기 전에 무엇을 만들 것인가를 미리 상상하고 ..