분류 전체보기29 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. 일러스트레이터에서 3D 효과가 들어간 개체를 만들기 일러스트레이터 툴 수업 중에 최근에 SNS에서도 많이 보이기도 하고 그래픽 작업을 할 때 어렵지 않은 방법으로 큰 효과를 낼 수 있는 툴 활용을 몇 가지 배웠다. 첫 번째로 Make with Top Object 기능을 활용하여 문자를 모양에 맞춰 변형 후 Blend option으로 3D 느낌 개체를 만들어 보았다. 방법은 아래와 같다. 1. 원하는 모양의 오브젝트와 텍스트를 만든 후 (텍스트는 볼륨이 있는 것이 좋다) 함께 선택한다. 2. Object -> Envelope Distort -> Make with Top Object (단축키- ctrl+alt+c)를 실행한다. 3. 모양 안에 텍스트가 채워진다. 4. 3번 그대로 활용해도 되고 3D 느낌을 주기 위하여 3번 그래픽을 복사하여 크기와.. 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. 이전 1 2 3 4 5 다음
