본문 바로가기

전체 글227

[WEB/CSS] 그리드(Grid) 사용하기 우선 그리드 개념을 이해하기 위해 아래 코드를 입력하고 결과를 확인한다. NAVIGATION ACTICLE 그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다. 위 코드의 grid-template-columns: 150px 1fr의 의미는 첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고 두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다. 그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다. 만약 grid-template-columns: 2fr 1fr이라면 첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다. 두번째 컬럼인 ACTICLE은 2fr과 1fr을.. 2022. 7. 3.
[WEB/CSS] 박스 모델 이해하기 box.html이라는 새로운 파일을 만들고 그 곳에 아래와 같은 코드를 입력하였다. 결과는 h1태그를 사용했기 때문에 CSS가 제목으로 나타났고 a태그를 사용했기때문에 링크가 걸린 것을 확인할 수 있다. 그렇다면 이런 궁금증이 생길 수 있다. h1태그는 왜 자동으로 줄바꿈이 이루어지는가? a태그는 왜 h1과 달리 줄바꿈이 이루어지지 않고 사용이 되는가? 이때 나타나는 개념이 박스 모델이다. h1과 같은 태그는 화면전체를 사용하는 태그로써 block level element이라고도 불린다. a와 같은 태그는 글자 자기구역만을 사용하는 태그로써 inline level element라고 불린다. 그렇다면 block level element와 inline level element을 확인해 보기 위해 영역을 눈에.. 2022. 7. 1.
[WEB/CSS] 정렬, 폰트 크기 조절하기 현재까지 만든 웹페이지를 보면 h1 태그로 묶인 WEB의 크기가 더 컸으면 좋겠다는 생각을 한다. CSS로 글자의 크기를 조절하기 위해서는 h1만 수정할 것이기 때문에 style 태그 안에서 h1{}을 작성해준다. 글자 크기를 설정하는 속성은 font-size이다. font-size 작성 후 그 뒤에 자신이 원하는 크기를 넣어주면 된다. 글자 크기를 50픽셀로 주게되었을 때를 확인해 보면 확실히 더 커진 것을 확인 할 수 있다. *아래 예시는 픽셀 값을 자유롭게 지정할 수 있다는 것을 보여준다. 다시 한 번 내가 만든 웹페이지를 보면 다 왼쪽으로 치우쳐져 있는 것을 확인 할 수 있다. 저 WEB을 가운데 정렬하기 위해서는 style 태그에서 h1 영역에 text-ailgn: center; 속성을 추가하면.. 2022. 6. 30.
[WEB/CSS] 글자 색 바꾸기, 밑줄 없애기 현재 HTML로 짜여져 있는 코드는 CSS 언어와 다르기때문에 CSS 언어의 코드를 입력하기 위해서는 style 태그를 사용해야 한다. style 태그 안에 위치한 내용은 CSS언어로 처리하겠다는 의미이다. 만약 링크의 색을 다른 색으로 바꾸고 싶다면 4개의 a태그를 하나씩 바꿔도 되지만 CSS는 한 번에 색 변경을 처리해 준다. *CSS는 style 태그 안에서 이루어져야한다. a 태그를 가지는 모든 코드의 색을 빨간색으로 바꾸겠다는 의미이다. 새로고침하여 확인해보면 잘 수정된 것을 볼 수 있다. 만약, CSS만 다른 색으로 바꾸고 싶다면 HTML 코드에서 style를 작성하면 된다. 현재 HTML 코드의 a태그 안에 style = "color: black" 작성을 하고 새로고침을 하면 CSS만 검은색.. 2022. 6. 29.
[WEB/HTML] 동영상 삽입 현재까지 만든 웹 페이지가 아직은 심심하다. 웹 페이지마다 동영상을 추가 해야하는 경우가 생길 수 도 있다. 웹 페이지에 동영상을 추가하는 방법은 1. 우선 추가하고 싶은 동영상을 찾는다. 생활코딩님의 영상을 보고 공부 중이기 때문에 유튜브에서 생활코딩님의 영상을 찾는다. 2. 동영상의 공유 버튼을 누르고 퍼가기를 클릭한다. 3. 퍼가기를 누르면 이런 화면이 나올텐데 오른쪽을 보면 태그로 구성된 코드가 있는 것을 볼 수 있다. 4. 저 코드를 복사해서 우리 코드의 원하는 곳에 붙여넣기를 한다. 5. 웹 페이지를 새로고침해서 확인한다. 2022. 6. 27.
[WEB/HTML] 웹 페이지의 구조 이해하기(head, body, html, title, meta) 내가 만든 웹 페이지의 탭을 보면 다른 페이지의 제목보다 멋이 없어 보이며 바꾸고 싶은 생각이 든다. 이럴 때 사용하는 태그가 바로 title 태그이다. 지금까지 작성한 코드 위에 원하는 제목를 작성해준다. 나는 WEB1-HTML로 해 보았다. 결과는 아주 잘 바뀐 것을 볼 수 있다. title 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 웬만하면 작성하는 것이 좋다. 또한 현재 만든 웹페이지를 보면 영어만 있어 한글을 추가하고 싶은 마음이 생겨 코드에 한글을 추가하면 글씨가 깨져서 웹페이지에 나타나게 된다. 이러한 문제를 해결하기 위해서는 코드 하나를 추가해주어야 한다. 바로, 이다. 이 태그를 작성하고 다시 웹페이지를 새로고침 하면 잘 출력되는 것을.. 2022. 6. 26.
[WEB/HTML] 줄바꿈 태그(p, br), 이미지 넣기(img) 아래 코드를 보면 웹 페이지에서 단락을 구분하기위해 줄바꿈을 했는데 적용이 되지 않았다. 이런 문제를 해결하기 위해서는 줄바꿈 태그를 사용해야 한다. HTML에서 줄바꿈을 하고 싶을 때는 태그를 사용한다. 태그를 1번 사용했을 경우 태그를 2번 사용했을 경우 * 태그의 특징은 앞에서 본 태그들과는 달리 닫히는 태그가 필요 없다는 것이다. img, input, hr, meta 등도 닫지 않는 태그의 사례이다. 줄바꿈으로 단락을 구분할 수도 있지만 단락을 구분해주는 태그는 따로 있다. 바로 태그이다. p태그는 br 태그와 다르게 하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재한다. p태그 사용하기 전 p태그 사용 후 결과는 딱히 다를게 없어 보인다... 웹 페이지에 이미지를 넣을 수도 있는데 이때.. 2022. 6. 25.
[WEB/HTML] 2. 기본 문법 - 태그(strong, u) https://conquer-it.tistory.com/94 저번 자료 [WEB/HTML] 1. Atom으로 웹 만들어 보기 1. 우선 Atom을 자신의 운영체제에 맞게 다운로드 받아준다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the.. conquer-it.tistory.com 1. 실습을 진행하기 위해 Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. 이라.. 2022. 6. 24.
[WEB/HTML] 1. Atom으로 웹 만들어 보기 1. 우선 Atom을 자신의 운영체제에 맞게 다운로드 받아준다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. 설치하는 중... 3. 설치가 완료되면 일단 빨간 네모안에 있는 것을 모두 닫아준다. 4. 자신이 원하는 저장공간에 WEB이라는 파일 하나를 만들어 준다. 5... 2022. 6. 23.

티스토리툴바