Web24 div태그와 css의 border 속성 [ 공간을 분할하는 div태그 ]div태그는 웹페이지에서 레이아웃을 만들 때 주로 사용하는 태그이다. block속성의 대표적인 태그로 너비 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다. block속성에 너비 높이와 여백을 주고 싶을 때에는 CSS BOX MODEL이라는 개념을 알고 있어야 한다. [ CSS BOX MODEL ]block속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해 css를 이용한다. 가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다. 이런 박스 형태의 요소를 스타일 시트에서는(css) 'css 박스 모델'이라고 부른다. 박스 모델로 컨텐츠 영역을 만들 때에는 width와 height를 이.. 2024. 6. 3. css를 사용하여 웹 폰트 연결, 스타일 속성 적용 html 작업 할 때는 이미 브라우저 기본 스타일시트가 적용되어 있기 때문에 css로 초기화 작업 후 작성한다.작업을 시작 할 때는 어떤 작업을 시작하는지 주석을 달고 시작하는 버릇을 들이자.html 헤드 부분에 링크는 한번에 한개만 연결 가능.두개 이상 부터는 2줄~ 작성 브라우저 기본 스타일시트를 초기화 시켜주는 css 파일을 만들어 연결 시켜준다. css를 사용하여 웹 폰트 연결해본다.폰트를 다운 받아 설치하고 css에 기입하는 것이 아니라 폰트 사이트에서 경로를 복사하여 웹 폰트를 연결 시켜 줄 수 있다. (1~2) 일단, 상업용 무료 폰트가 많은 구글 폰트에 접속하여 사용할 폰트를 선택하고 Get font를 클릭하면 장바구니에 담긴다. (사용할 여러 폰트를 같이 넣는다) (3) 장바구니에 들어.. 2024. 6. 1. table 태그 / css 수업 시작 표를 만드는 table태그란?부모자식 태그로 이루어져 있고 이전에는 레이아웃을 만드는 태그로 사용되었다. 현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로 표를 구성해준다. 부모태그인 table태그로 행과 열을 묶는다.행은 tr태그로 표현하고, 열은 td로 표현한다. 그리고 표의 제목을 나타내는 th가 있다. 이렇게 html을 구성하는 태그를 배우고 있다. 하지만 이 html만으로는 우리가 아는 웹사이트를 만들 수 없다.html을 꾸며주는 css, java script... 등을 사용하여 적용시켜 줘야 한다.그 중에 css 작성을 시작 했다. css란?html구조에 디자인을 입히는 언어. Cascading Style sheets의 약자로 위에서 아래로 흐르는 디자인시트 언어라는 의미다. 웹 문.. 2024. 6. 1. html 문서 작성 기초 (a태그, 이미지태그) html 문서를 다른 페이지로 이동할 수 있도록 연결시켜주는 a태그와 이미지를 입력하는 이미지태그를 배웠다. 본격적으로 들어가기 전에 다른 웹사이트를 예시로 html을 볼 수 있도록 F12 키를 누르거나 창에서 오른쪽 클릭하여 검사에 들어가 본다. 이렇게 개발자 도구를 열면 해당 웹사이트에 html을 볼 수 있다. 태그들이 엄청나게 많은데 배울수록 이 태그가 무슨 태그인지 다 알 수 있는 날이 오기를 바란다. VSCode를 실행하고 새로운 폴더를 만들어 넣은 뒤에 html 새 파일을 하나 만든다. 익숙하지 않아서 새 파일 만들 때 헷갈릴 수도 있지만 꼭 확장자. html 써주도록 한다! (블로그를 작성하는 지금, 일주일 정도 지나니까 꽤 익숙해졌다) [ 하이퍼 링크를 걸어주는 태그 ]a태그는 앵.. 2024. 6. 1. html 문서 작성 기초 (block속성, inline속성) html 시작을 했다. 한 10년도 전에 잠깐 배웠었는데 메모장에 head, body, 글자 색상 바꾸는 걸 배웠었던 기억이 난다. 배우던 초창기에 취업이 됐었어서 그만뒀었었나.. 기억이 잘 안 나지만 뭔가 좀 지루하고 어려웠던 기억이 남아있다. 그래서 html을 나간다고 조금 걱정이 됐었는데 이제는 메모장이 아니라 Visual Studio Code(이하 VSCode)라는 프로그램 안에서 html을 작성한다고 한다. 우선 확장 탭에 들어가서 저 한국어 버전으로 VSCode를 돌릴 수 있게 해주는 Korean Language Pack for Visual, VSCode에서 작성한 웹페이지를 웹브라우저로 열어주는 Live Server, 코드를 정리해 주는 Prettier 이 세 가지를 설치하고 시작했다... 2024. 5. 29. 포토샵 활용_웹페이지 와이어프레임 구성 웹페이지 구성 명칭을 배우고 포토샵에서 웹페이지 설계를 위한 와이어프레임 구성을 실습했다. 인터넷을 하면 항상 보는 웹페이지지만 막상 직접 설계하려고 하니 적절한 크기와 배치가 쉽지 않았다. 게다가 처음에는 어떤 웹페이지인지 생각하지 않고 레이아웃만 짜려고 하니 어렵기도 해서 일단 코스메틱 브랜드 웹페이지로 주제를 잡고 진행해 보았다. 헤더에 로고와 내비게이션 서치바의 로고와 장바구니 회원정보 아이콘을 넣고 브랜드의 메인 비주얼 섹션을 넣고 브랜드 이미지를 소개하는 콘텐츠(메인타이틀 부분)와 제품을 구매할 수 있는 콘텐츠(서브 타이틀 부분)로 나누고 그 아래에 제품군 소개 콘텐츠를 넣었다. 그리고 가장 아래 푸터에는 제품 구매 관련 콘텐츠로 구성했다. 타이틀과 비주얼 사이의 간격이 괜찮다고 생각했는.. 2024. 5. 26. 이전 1 2 3 4 다음
