티스토리

팡지's

검색하기

블로그 홈

팡지's

zzyede.tistory.com/m

팡지혜 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

list-style [목록 스타일 속성] 목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어할 수 있다. list-style속성을 쓰면 list-style-type과 list-style-position을 한꺼번에 선언할 수 있다.list-style-type : ul에 불릿이나 ol의 숫자를 다양한 형태로 바꿀 때 사용한다. - list-style-type: disc(●) - list-style-type: circle(○) - list-style-type: square(■) - list-style-type: none(불릿 없애기) -순서가 있는 목록- list-style-type: demical(1로 시작하는 십진수. 1,2,3...) - list-style-type: demical-l.. 공감수 0 댓글수 0 2024. 7. 24.
overflow와 selection [overflow 속성]박스 안에 컨텐츠가 많아 범위를 넘어갈 때 넘치는 부분을 어떻게 보여줄지 정하는 속성이다. - overflow: hidden; ★ : height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다. height속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.- overflow: scroll; ★ : 영역을 벗어나는 부분은 스크롤 바를 나타나게 한다. - overflow: visible; : 기본값으로 영역에서 벗어난 부분을 그대로 보여준다. - overflow: auto; ★ : 박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다. - overflow: initial; : 기본값으로 설정한다. - overflow: inherit; : 부모 요소의.. 공감수 0 댓글수 0 2024. 6. 25.
다양한 css 선택자 기본형예시 후손선택자: 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.부모태그 자식태그 {속성: 값;}div h2{} 자손 선택자: 부모 태그 안에 있는 자식 요소를 선택할 때 사용한다.후손 선택자는 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.하지만 자손 선택자는 바로 아래계층 안에 있는 자식태그만 선택한다.부모선택자 > 자식선택자 { 속성: 값; }div > h2{} 동위선택자: 동위선택자(=형제선택자)는 동위관계에서 바로 아래줄에(뒤에) 있는 형제 태그를 선택하거나 뒤에 있는 모든 형제태그를 선택할 때 사용한다.+선택자는 바로 뒤에 있는 형제 태그 1개를 선택할 때 사.. 공감수 0 댓글수 1 2024. 6. 16.
align-content 지난 align-items와 flex-direction에 이어 align-content 속성을 알아보자. 플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다. 이때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다. 이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이에(between), 주위에(around) 동일한 간격을 주어 배치할 수 있다. 우선 부모박스 안에 들어갈 수 있도록 넓이 높이를 유지하며 들어 갈 수 있도록 flex-wrap: wrap;을 적용시킨다. 위의 이미지 처럼 gap과 align-content를 같이 적용하면 가로 세로에 동일한 간격을 줄 수도 있고 따로 간격을 지정할 수 있다. gap은 flex를 주지 않아도 적용 가능하다.. 공감수 0 댓글수 0 2024. 6. 13.
align-itmes 지난 display:flex의 하위속성인 justify-content 에 이어서 다른 하위 속성들을 알아보자. ★ 시작 하기 전 하위속성들에 대해서만 쓰다 보니 잊은 게 있었는데 하위 속성 쓰기 전에 display: flex; 를 입력해 줘야 한다는 것이다. ★ align-items : 부모박스 안에서 세로 위치(기준)에 자식박스를 정렬하는 속성이다.이때 '세로'는 부모박스의 top에 위치하느냐, middle에 위치하느냐, bottom부분에 위치하는가를 뜻한다. flex-direction : 자식박스의 나열 방향으로 자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용한다. (속성값에 -reverse가 붙으면 start와 end자리가 바뀌게 되고.. 공감수 0 댓글수 1 2024. 6. 8.
display 속성 [ 박스를 배치 하거나 고유의 속성을 바꾸는 display ] display는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀 때 사용한다. - display: block; 해당 요소를 block속성으로 바꾸거나 none으로 숨긴 요소를 다시 나타냄. - display: inline; 해당 요소를 inline속성으로 바꿈. - display: inline-block; 해당 요소를 inline-block속성으로 바꿈. - display: none; 해당 요소와 영역을 모두 표현하지 않음(숨김) [ 영역은 남겨둔채 요소를 숨길 수 있는 visibility ] display:none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨긴다. 하지만 영역은 남겨두고 .. 공감수 0 댓글수 1 2024. 6. 8.
float속성과 중첩 박스 [ 박스를 가로로 배치하는 float속성 ]float속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.\웹 페이지에서는 float를 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다. 만약 배치 하지 않을 경우 float:none;속성이나 clear속성을 이용한다. - float : left; 박스를 영역의 왼쪽으로 배치한다. - float : right; 박스를 영역의 오른쪽으로 배치한다. - float : none; 박스를 배치하지 않음. [ float를 해제하는 clear속성 ]float이 적용된 박스는 해당 위치로부터 살짝 멀어지게 된다. 아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고 올라오는 현상이 생기는데,이 현상을 막고 박스를 위에서 아래로 배치하려면 c.. 공감수 0 댓글수 1 2024. 6. 8.
box-sizing 컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★ css box model을 계산할 때 보통 width + (padding*2) + (border*2) 이런 공식으로 계산을 하지만 box-sizing속성을 이용하면 padding영역과 border영역을 컨텐츠 영역 (width/height)안에 포함시켜준다.이렇게 되면 따로 사이즈를 계산할 필요가 없게 된다. - box-sizing : content-box; : 기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않는다. - box-sizing : border-box;★ : 컨텐츠 영역 안에 padding과 border를 포함시킨다. border-box 속성 및 여러 속성과 이미지태그를 활용해봤다. - .. 공감수 0 댓글수 1 2024. 6. 4.
div태그와 css의 border 속성 [ 공간을 분할하는 div태그 ]div태그는 웹페이지에서 레이아웃을 만들 때 주로 사용하는 태그이다. block속성의 대표적인 태그로 너비 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다. block속성에 너비 높이와 여백을 주고 싶을 때에는 CSS BOX MODEL이라는 개념을 알고 있어야 한다. [ CSS BOX MODEL ]block속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해 css를 이용한다. 가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다. 이런 박스 형태의 요소를 스타일 시트에서는(css) 'css 박스 모델'이라고 부른다. 박스 모델로 컨텐츠 영역을 만들 때에는 width와 height를 이.. 공감수 0 댓글수 2 2024. 6. 3.
css를 사용하여 웹 폰트 연결, 스타일 속성 적용 html 작업 할 때는 이미 브라우저 기본 스타일시트가 적용되어 있기 때문에 css로 초기화 작업 후 작성한다.작업을 시작 할 때는 어떤 작업을 시작하는지 주석을 달고 시작하는 버릇을 들이자.html 헤드 부분에 링크는 한번에 한개만 연결 가능.두개 이상 부터는 2줄~ 작성 브라우저 기본 스타일시트를 초기화 시켜주는 css 파일을 만들어 연결 시켜준다. css를 사용하여 웹 폰트 연결해본다.폰트를 다운 받아 설치하고 css에 기입하는 것이 아니라 폰트 사이트에서 경로를 복사하여 웹 폰트를 연결 시켜 줄 수 있다. (1~2) 일단, 상업용 무료 폰트가 많은 구글 폰트에 접속하여 사용할 폰트를 선택하고 Get font를 클릭하면 장바구니에 담긴다. (사용할 여러 폰트를 같이 넣는다) (3) 장바구니에 들어.. 공감수 1 댓글수 2 2024. 6. 1.
table 태그 / css 수업 시작 표를 만드는 table태그란?부모자식 태그로 이루어져 있고 이전에는 레이아웃을 만드는 태그로 사용되었다. 현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로 표를 구성해준다. 부모태그인 table태그로 행과 열을 묶는다.행은 tr태그로 표현하고, 열은 td로 표현한다. 그리고 표의 제목을 나타내는 th가 있다. 이렇게 html을 구성하는 태그를 배우고 있다. 하지만 이 html만으로는 우리가 아는 웹사이트를 만들 수 없다.html을 꾸며주는 css, java script... 등을 사용하여 적용시켜 줘야 한다.그 중에 css 작성을 시작 했다. css란?html구조에 디자인을 입히는 언어. Cascading Style sheets의 약자로 위에서 아래로 흐르는 디자인시트 언어라는 의미다. 웹 문.. 공감수 0 댓글수 0 2024. 6. 1.
html 문서 작성 기초 (a태그, 이미지태그) html 문서를 다른 페이지로 이동할 수 있도록 연결시켜주는 a태그와 이미지를 입력하는 이미지태그를 배웠다. 본격적으로 들어가기 전에 다른 웹사이트를 예시로 html을 볼 수 있도록 F12 키를 누르거나 창에서 오른쪽 클릭하여 검사에 들어가 본다. 이렇게 개발자 도구를 열면 해당 웹사이트에 html을 볼 수 있다. 태그들이 엄청나게 많은데 배울수록 이 태그가 무슨 태그인지 다 알 수 있는 날이 오기를 바란다. VSCode를 실행하고 새로운 폴더를 만들어 넣은 뒤에 html 새 파일을 하나 만든다. 익숙하지 않아서 새 파일 만들 때 헷갈릴 수도 있지만 꼭 확장자. html 써주도록 한다! (블로그를 작성하는 지금, 일주일 정도 지나니까 꽤 익숙해졌다) [ 하이퍼 링크를 걸어주는 태그 ]a태그는 앵.. 공감수 0 댓글수 0 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 이 세 가지를 설치하고 시작했다... 공감수 0 댓글수 0 2024. 5. 29.
포토샵 활용_웹페이지 와이어프레임 구성 웹페이지 구성 명칭을 배우고 포토샵에서 웹페이지 설계를 위한 와이어프레임 구성을 실습했다. 인터넷을 하면 항상 보는 웹페이지지만 막상 직접 설계하려고 하니 적절한 크기와 배치가 쉽지 않았다. 게다가 처음에는 어떤 웹페이지인지 생각하지 않고 레이아웃만 짜려고 하니 어렵기도 해서 일단 코스메틱 브랜드 웹페이지로 주제를 잡고 진행해 보았다. 헤더에 로고와 내비게이션 서치바의 로고와 장바구니 회원정보 아이콘을 넣고 브랜드의 메인 비주얼 섹션을 넣고 브랜드 이미지를 소개하는 콘텐츠(메인타이틀 부분)와 제품을 구매할 수 있는 콘텐츠(서브 타이틀 부분)로 나누고 그 아래에 제품군 소개 콘텐츠를 넣었다. 그리고 가장 아래 푸터에는 제품 구매 관련 콘텐츠로 구성했다. 타이틀과 비주얼 사이의 간격이 괜찮다고 생각했는.. 공감수 1 댓글수 0 2024. 5. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.