whatisthis?

NAVIGATION ARTICLE CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 CONTROL 간의 관계를 정의하는 데 아주 탁월하다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있다. GRID 에서는 테이블이라 생각했을때, 가로 값이 column(열), 세로값이 row(행) 이 된다. 즉..

CSS 단위 px pt em rem % 란 무엇이며 차이점은? ▒ CSS 단위 px pt em rem % 란 무엇이며 차이점은? CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰인다. 크게는 절대 크기가 변하지 않는.. soharu.tistory.com cr : soharu.tistory.com 단위 -> font-size, text-indent, line-height, width, height, padding 등 무언가의 크기를 나타낼 때 사용됨. 절대단위 고정된 값 출력. 크기가 변하지 않음. cm, mm, px, pt(포인트), pc(파이카) 상대단위 다른 요소의 크기에 영향을 받아 상대..

생활코딩 WEB2 - css 편 (3/3) 화면에 크기에 따라 웹페이지 요소들이 최적화된 크기로 바뀌게 하는 것. >> 핵심 : 미디어 쿼리 mediaquery.html이라는 예제를 통해 알아보자. ** 화면이 600px보다 커질때 글자가 없어지게 mywebproject.tistory.com *** 중복 제거의 중요성 *** 그러나, 태그의 부분은 결국 index.html, 1.html, 2.html, 3.html에 중복 되어있는 것이다. 만약 스타일 요소를 하나라도 수정한다면, 우리는 모든 파일에 들어가서 이를 수정해야 하는데 이런 번거로움을 없애고 중복을 없애기 위해 다음과 같이 .css 파일을 이용해보자. 위처럼 태그 안의 내용을 복사해서 새 파일로 저장한다. 파일명은 style.css로, 즉 cs..

화면에 크기에 따라 웹페이지 요소들이 최적화된 크기로 바뀌게 하는 것. >> 핵심 : 미디어 쿼리 mediaquery.html이라는 예제를 통해 알아보자. ** 화면이 600px보다 커질때 글자가 없어지게끔 하려면 다음과 같이 mediaquery를 사용하면 된다. 스크린 너비 > 600px 이라는 것은, 최소폭이 600px이라는 것 이므로, min-width=600px이 된다. 조건 screen width > 600px = @media(min-width:600px) 적용할 선택자, 속성 div{ display:none; } = 600px이 넘어가면 display:none으로 인해 사라지는 것을 알 수 있다! +) 반대로, max-width를 사용하면, 폭이 600보다 작아지면 사라지게 된다. 우리 웹사이..

2-8. 박스 모델 근본적인 태그의 사용에서 알 수 있듯이 태그는 줄바꿈이 되어 화면을 다 사용하고, 태그는 줄바꿈이 되지 않고 자신의 컨텐트 크기만큼만 사용한다. My future life I want to be a web front-end developer. Since I was 17, I have liked computer games and I want to make it myself. Now, I want to create a website that is helpful to many people, not only games. 다음과 같이 태그와 태그가 있을 때 둘의 차지하는 공간에 대해 알아보자. border-width는 테두리 두께, border-color는 테두리 색상, border style..

생활코딩 WEB2-CSS html태그를 꾸미기 위한 해결책 1. 이미 있는 html의 디자인에 관련된 태그를 만드는 것 ( = 쉬운 방법 ) 2. 아예 새로운 언어를 만드는 것 ( = 근본적인 해결책 ) 1. html 문서 내에 새로운 태그가 생겼다! 태그 : 이제는 사라짐. 글자 색을 바꿀 수 있도록. 이것은 와 같은 다른 html태그와는 달리 '정보'를 나타내지 않는다. 따라서 이는 해당 페이지의 정보로서의 가치를 떨어뜨리게 됨. 또한, 태그 글자 색을 빨강으로 바꾸는 일을 1억개를 반복한다면 ? -> html에서는 일일히 하나씩 수정해야함 = CSS필요 2. CSS로 적용하는 방법 index.html 문서의 태그 내에 태그 추가하기. 태그가 몇개이던간에 한번에 다 font color가 red로 바뀌..

+) 부록 - 코드의 힘 1. 영상을 삽입하는 법 유튜브 등에서 EMBED(또는 Source)를 눌러 복사한다. -> 태그 REFERENCE LECTURE index.html 파일 하단에 영상 첨부하기 위해 코드 추가한 것. 2. 댓글 기능 추가 https://disqus.com https://disqus.com disqus.com 댓글창이 뜰 위치에 아래 코드를 붙여넣으면 된다. *** 어째서인지 댓글 달려고 하니까 이메일 인증에서 막힌다. (...) 대체 사이트 -> https://livere.com 라이브리 livere.com - 웹 페이지 방문자 분석기 구글 analytics https://analytics.google.com/analytics/web/provision/#/provision Red..

[웹호스팅 & 웹서버 설치] 1-16. 원시 웹 웹의 역사 인터넷 웹 도시 운영체제 건물 프로그램 하나 즉, 인터넷 안에 웹이라는 서비스가 포함된 것. (인터넷 안에는 FTP, email, web등의 다양한 서비스가 있음) 1960 인터넷의 등장 1990 웹(WEB)의 등장 -스위스 * 참고 -> 표의 html 태그 1-17. 서버와 클라이언트 인터넷이 작동하기 위해 두대의 컴퓨터 필요 (서버-클라이언트) 팀 버너스리 : 웹브라우저, 웹서버 (두대의 컴퓨터로) 웹서버 : 정보를 응답 / 웹브라우저 : 정보를 요청 자신의 웹사이트를 모두가 가질 수 있도록 공유하는 방법엔 두가지가 있음. 1) 웹 호스팅 서비스 이용 2) 자신의 컴퓨터에 웹 서버 설치하여 서버-클라이언트 이용 1-18. 웹 호스팅 (깃허브,..

[태그,속성 그리고 웹사이트 완성!] 1-10. html이 중요한 이유 '기본이 중요하다.' coding 과 coding 는 우리 눈에 보이는 결과는 같다. 의 style을 입힌 위에 coding은 그저 글의 내용일 뿐이고 아래의 태그는 제목을 의미한다. 즉, 검색 엔진에 'coding'을 쳐봤을때 검색 엔진은 제목이 coding인 후자를 더 선택할 것임. -> 검색 엔진의 중요성이 ★★★ 웹이 갖고 있는 본래의 의미는 '정보' -> 검색엔진을 통해 정보를 잘 검색할 수있도록 예를 들면 포토샵으로 글을 작성하면, 그 글에 포함된 정보는 검색을 통해 나타나지 않는다. 웹의 중요한 접근성. 신체적으로 불편함이 있는 사람들을 위해 정보를 잘 얻을 수 있도록. (예- 포토샵 그림으로 글을 나타내면, 시각장애가 ..

학습하는 것이 아니라 나의 문제를 해결해나가는것. 원인과 결과를 찾아보기. * 웹 = 퍼블릭 도메인 ( 저작권X. 완전한 자유 ) * 텍스트에디터 검색할 땐 -> best HTML editor 2021 이런식으로 검색 웹 브라우저에서 Ctrl+O 누르면 파일탐색기 뜸 - html파일 열 수 있음 1-6. 기본문법 태그 1. : bold 글씨 2. : 글씨 밑줄 3. 태그 This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 직접 예제를 통해 각 태그의 기능을 알아보기. 구글링 >> html ___ tag (ex - html strong tag) -> h1태그는 일반 ..