티스토리

MUKOM_PARK

검색하기

블로그 홈

MUKOM_PARK

mukom-park.tistory.com/m

mukom 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

플렉스 박스 항목 배치 1. justify-content 속성 : 주축 기준의 배치 방법 지정하기 justify-content : flex-start | flex-end | center | space-between | space-around 1️⃣ flex-start : 주축의 시작점을 기준으로 배치한다. 2️⃣ flex-end : 주축의 끝점을 기준으로 배치한다. 3️⃣ center : 주축의 중앙을 기준으로 배치한다. 4️⃣ space-between : 첫 번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치한다. 5️⃣ space-around : 모든 플렉스 항목들을 같은 간격으로 배치한다. 1️⃣ flex-start 주축을 가로로 지정되어 있기 때문에 플렉스 항목이 시작점.. 공감수 0 댓글수 0 2022. 10. 31.
플렉스 박스 레이아웃 1. Flex Box Layout : 플렉스 박스 레이아웃이란? 그리드 레이아웃을 기본으로 하여 플렉스 박스를 원하는 위치에 배치하는 레이아웃을 말한다. 플렉스 박스 레이아웃은 플렉스 항목이 플렉스 컨테이너로 묶여 있는 형태로 존재한다. 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이 설정되어 있는데 왼쪽에서 오른쪽으로 향하는 주축과 위에서 아래로 향하는 교차축이 있다. 1️⃣ 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소 2️⃣ 플렉스 컨테이너 : 웹 요소를 플렉스 박스 레이아웃에 적용하기 위해 묶는 틀 3️⃣ 주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향(왼 👉 오) 4️⃣ 교차축 : 교차축은 주축과 교차하는 방향(위 👉 아래) 2. display 속성 : 플렉스 컨.. 공감수 0 댓글수 0 2022. 10. 31.
미디어 쿼리 1. 미디어 쿼리란? 미디어 쿼리는 사용자가 사이트에 접속하는 미디어 유형에 따라 적용하는 CSS 를 별도로 주기 위하여 사용하는 모듈이다. @media [only | not] 미디어 유형 [and 조건] * [and 조건] 1️⃣ and : 조건을 두 가지 이상을 작성할 때에 구분자로 사용하는 키워드이다. 2️⃣ , 쉼표 : 동일한 스타일 유형을 사용할 미디어 유형 또는 조건이 있다면 쉼표로 추가한다. 3️⃣ only : 미디어 쿼리를 지원하는 브라우저에서만 조건을 인식하게 한다. 4️⃣ not : not 다음에 지정된 미디어 유형은 제외한다. 📌미디어 유형의 종류 자주 사용하는 미디어 유형은 다음과 같다. 1️⃣ print : 인쇄 장치 : [ctrl + p] 화면에서 볼 수 있는 화면의 CSS를 지.. 공감수 0 댓글수 0 2022. 10. 30.
가변 그리드 레이아웃 1. 고정 그리드와 가변 그리드 웹 사이트에서의 레이아웃을 정할 때에는 '그리드 시스템(grid system)' 을 기준다. 보통 12 컬럼(칸)으로 화면을 분할하여 배치 요소를 규칙적으로 배열할 수 있다는 장점을 가진다. 고정 그리드는 화면의 너비를 특정한 값으로 고정해서 사용하는 것으로 너비가 항상 일정하게 유지되기 때문에 원하는 레이아웃을 만들기에 쉽다는 장점이 있지만 화면의 너비가 변하는 경우에는 적절히 변할 수 없다는 단점이 있다. 이로 인하여 능동적으로 너비의 변화에 레이아웃을 변경하는 가변 그리드를 사용하기도 한다. 너비의 값을 특정한 값으로 고정하지 않고 백분율을 활용하여 너비의 변화에 반응한다는 특징이 있다. 2. 고정 그리드 만들기 고정 그리드는 픽셀 등의 단위를 이용하여 특정한 값을 .. 공감수 0 댓글수 0 2022. 10. 30.
CSS Diner : selector 연습하기 (21 ~ 32번) 21. Select all even plates 정답 : plate:nth-of-type(even) 해설 : 이번 문제는 짝수 번째에 있는 접시를 선택하는 문제이다. plate 태그 타입의 짝수 번째에 있는 요소를 선택하기 위해 nth-of-type 선택자에서도 even 키워드를 사용하여 짝수 번째를 지정하면 된다. 홀수를 지정하고 싶다면 even 대신 odd 키워드를 사용하면 된다. 22. Select every 2nd plate, starting from the 3rd 정답 : plate:nth-of-type(2n+3) | plate:nth-child(2n+3) 해설 : 이번 문제는 3번째 접시에서 시작해서 짝수 번째에 있는 접시를 선택하는 문제이다. 위치에 관련된 것이기 때문에 nth 선택자를 사용.. 공감수 0 댓글수 0 2022. 10. 30.
CSS Diner : selector 연습하기 (11 ~ 20번) 11. Select everything on a plate 정답 : plate * 해설 : 이번 문제는 접시 위의 모든 요소를 선택하는 문제이다. 모든 요소 * 중에서도 접시를 조상 또는 부모로 가지고 있어야 하기 때문에 공백을 이용하여 조상 또는 부모로 plate 를 명시해준다. 12. Select every apple that's next to a plate 정답 : plate + apple 해설 : 이번 문제는 접시 다음에 있는 사과를 선택하는 문제이다. 즉, 크기와 상관없는 사과를 선택할 것인데, 그 사과 중에서도 접시를 인접 형제로 가지고 있는 사과만 선택하는 것이다. 인접 형제를 선택하는 선택자는 + 로 구분하여 '접시를 인접한 형제로 가진 + 사과' 처럼 사용할 수 있다. 13. Select.. 공감수 0 댓글수 1 2022. 10. 30.
CSS Diner : selector 연습하기 (1 ~ 10번) 1. Select the plates 정답 : plate 해설 : 테이블 위의 모든 접시를 선택해야 하는 단계이다. 접시 태그에 class 또는 id 식별자가 없기 때문에 태그명으로 선택한다. 태그명에 일치하는 모든 태그가 선택된다. 2. Select the bento boxes 정답 : bento 해설 : 테이블 위의 물건 중 도시락만 선택해야 하는 문제이다. 모두 식별자가 없기 때문에 태그명으로 선택하였다. 3. Select the fancy plate 정답 : #fancy 해설 : 테이블 위의 물건 중 파란 테두리가 있는 접시만 고르는 문제이다. 해당 요소에는 id 식별자가 주어져 있기 때문에 해당 식별자로 선택한다. id 식별자는 이름 앞에 # 을 붙여서 표기한다. 4. Select the app.. 공감수 0 댓글수 0 2022. 10. 30.
애니메이션 1. 애니메이션 트랜지션과 비슷하지만 수도 클래스를 사용하지 않고 적용할 수 있다는 점에서 차이점이 있다. 특정 지점을 변경 지점(keyframe)으로 잡아 일정한 스타일의 변화를 주게 된다. 2. @keyframes 속성 : 애니메이션 변경 지점 설정하기 @keyframes { {}} 애니메이션은 진행율에 따라 0% 부터 100%까지 지정되며 세부 지점을 따로 지정할 수 있다. 또는 from(0%) , to(100%) 로도 지정이 가능하다. 위의 예시는 진행율이 0% 즉 시작할 때에는 배경 색상이 파란색에 테두리가 검정색이고 형태는 사각형으로 시작한다. 하지만 애니메이션이 3초간 진행이 되면서 100% 로 향해갈 때에 배경 색상은 하늘색에 테두리는 파란색 형태는 원형으로 변형이 되고 애니메이션이 끝나면.. 공감수 0 댓글수 0 2022. 10. 28.
transition : 전환 1. 트랜지션이란? 수도 클래스와의 조합으로 코드가 작성되고, 웹 요소의 배경 색, 테두리, 형태 등의 스타일이 바뀌는 것을 의미한다. 수도 클래스와 함께 쓰여야 하기 때문에 사용자 반응이 필수적으로 있어야 한다. 2. transition-property 속성 : 트랜지션을 적용할 속성 지정하기 transition-property : all | none | 1️⃣ all : 기본값으로, 요소의 모든 속성이 트랜지션의 대상이 된다. 2️⃣ none : 트랜지션이 적용되는 동안에 아무 속성도 영향을 받지 않는다. 3️⃣ : 트랜지션이 적용될 특정 속성을 지정한다. 지정할 속성이 여러 개인 경우 쉼표(,)로 구분한다. 3. transition-duration 속성 : 트랜지션 진행 시간 지정하기 transit.. 공감수 0 댓글수 0 2022. 10. 28.
transform : 변형 1. 2차원 변형 함수 기본형 transform : 변형함수; 2차원 변형은 x 축과 y 축을 기준으로 하여 수평 또는 수직으로 이동하거나 회전하는 것을 말한다. x 축과 y 축의 기준이 되는 원점은 별도의 지정이 없으면 top 0, left 0 에 위치해 있다. 즉 x 축은 오른쪽으로 갈수록 그 값이 커지고, 왼쪽으로 갈수록 그 값이 작아진다. y 축은 아래로 갈수록 커지고, 위로 갈수록 작아진다. 크기 관련 변형 함수 1️⃣ scale(x, y) : x 축과 y 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다. 원본은 1이 기준이다. 2️⃣ scaleX(x) : x 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다. 3️⃣ scaleY(y) : y 축에 지정한 크기만큼을 배율로 하여 확대.. 공감수 0 댓글수 0 2022. 10. 28.
가상 클래스와 가상 요소 1. 가상 클래스(pseudo class) 사용자의 특정한 동작에 반응하여 스타일을 줄 수 있도록 하는 가상 클래스 선택자이다. 1️⃣ :link 가장 클래스 선택자 : 방문하지 않은 링크에 스타일 적용 텍스트 링크의 경우 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데, 이를 표시할 때에 링크의 밑줄을 없애거나, 색상을 변경하는 등의 스타일을 적용할 수 있다. link 가상 클래스 선택자 적용 안 함 link 가상 클래스 선택자 적용 함 2️⃣ :visited 가상 클래스 선택자 : 방문한 링크에 스타일 적용 링크에 한 번 이상 방문하게 되면 기본적으로 자주색(purple)으로 표시되는데, 방문했던 링크에 대해 스타일이 변경되지 않게 하려면 적용할 수 있는 선택자이다. visited 가상 클래스 .. 공감수 0 댓글수 0 2022. 10. 26.
속성 선택자 1. [속성] 선택자 기본형 태그명[속성명] 속성 선택자는 태그에 해당되는 속성이 존재하는 경우에 스타일을 지정하는 선택자이다. 예시 코드를 보자. 메뉴 작성 1 메뉴 작성 2 메뉴 작성 3 메뉴 작성 4 li 태그를 작성하였고 3개의 태그에는 title 속성이 있고, 나머지 하나의 태그에는 없는 형태로 작성하였다. 여기에 title 속성을 가진 li 태그에만 스타일을 적용하고자 한다면 다음과 같은 스타일을 적용할 수 있다. 메뉴 작성 1 메뉴 작성 2 메뉴 작성 3 메뉴 작성 4 2. [속성 = 값] 선택자 기본형 태그명[속성명 = 속성값] 속성 선택자에서는 속성명이 일치하기만 하면 모두 선택되었지만, 속성 = 값 선택자는 속성의 값을 별도로 지정하여 더 세밀한 스타일 적용이 가능하게 된다. 위에 작성.. 공감수 0 댓글수 0 2022. 10. 26.
combination selector : 연결 선택자 1. 연결 선택자란? 선택자에 다른 선택자를 연결하여 적용 대상이 되는 태그를 한정시키는 선택자를 말한다. 2. descendant selector : 자손 선택자 기본형 상위요소 하위요소 구분 요소 : 공백 적용 범위 : 지정한 모든 하위 요소에 스타일 적용 자손 선택자는 부모(조상) 요소에 포함되는 모든 하위요소에 대한 스타일 적용을 위하여 사용하는 선택자이다. 부모 요소에 포함되는 자식 요소뿐만 아니라 자손 즉 손자 요소에게도 그 영향이 미친다는 특징이 있다. 자식 p 1 손자 p 1 위의 코드에서 스타일을 적용하고자 하는 범위는 div 태그 내에 있는 p 태그 전부이다. 때문에 자손 선택자를 사용하여 상위요소 쪽에 div 를 하위요소 쪽에 p 를 작성하여 출력하였다. 자손 선택자는 더 세부적으로 .. 공감수 0 댓글수 0 2022. 10. 26.
HTML5 시멘틱 태그 1. 시멘틱 태그 시멘틱 태그는 그 자체로 기능하는 바는 없으나, 유의미한 이름을 태그명으로 사용하고 있기 때문에 태그명만으로 해당 내용이 문서 상에서 어떠한 부분을 담당하고 있는지 태그 속성을 보지 않고도 알 수 있게 해준다는 것에 의의가 있다. 문서 구조는 여러 시멘틱 태그로 이뤄질 수 있으며, 지정된 자리가 있는 것이 아니기 때문에 시멘틱 태그 안에 또다른 시멘틱 태그가 올 수도 있음을 유의해야 한다. 2. CAT WORLD 고양이가 세상을 구한다 고양이 안내 고양이 소개 고양이 역사 고양이 최고 고양이는 최고라구요 수 바이며, 천자만홍이 위하여서. 사랑의 만물은 열락의 얼마나 없는 못할 가슴이 구하지 그들의 힘있다. 사라지지 있으며, 이것은 불어 있는 품으며, 그들에게 목숨이 긴지라 듣는다. 곧 .. 공감수 0 댓글수 0 2022. 10. 24.
표 스타일 속성 1. border 속성 : 표 테두리 스타일 결정하기 border : table 태그 내에서 border 을 주게 되면 표의 테두리와 셀의 테두리 모두 한 번에 지정할 수 있지만, css 상에서 border 값을 줄 때에는 표의 테두리와 셀의 테두리를 각각 지정해 주어야 한다. 셀1 셀2 셀3 셀4 2. border-collapse 속성 : 테두리 통합, 분리하기 border-collapse : collapse | separate 앞서 살펴본 것처럼 표의 테두리와 셀의 테두리 간의 차이가 있기 때문에 이 간극을 조정하기 위하여 border-collapse 속성을 사용할 수 있다. 위의 예시의 테두리를 합쳐보자. 셀1 셀2 셀3 셀4 셀의 테두리는 안쪽에서의 구분만을 위해 남겨진 것을 확인할 수 있다. 3.. 공감수 0 댓글수 0 2022. 10. 24.
z-index 속성 1. z-index 속성 : 요소 쌓는 순서 정하기 z-index : 요소 간의 쌓이는 순서를 지정할 수 있게 도와주는 속성이다. z-index 값이 작을수록 아래에 쌓이고, 값이 클수록 위에 쌓인다. 이는 화면을 기준으로 말하면 값이 작을수록 뒤쪽에, 값이 클수록 앞쪽에 요소가 나타나는 것이다. 값을 따로 지정하지 않은 경우 1 의 값을 가지며, 그 후에 삽입되는 요소들은 값이 점점 커지게 된다. 즉, 뒤의 요소가 점점 더 앞으로 쌓이는 것이다. 먼저 z-index 값을 지정하지 않았을 경우를 살펴보자. 1 2 3 박스가 문서 상에 작성된 순서대로 쌓인 것을 확인할 수 있다. 그럼 임의로 z-index 값을 지정하여 쌓이는 순서를 변경해 보겠다. 1 2 3 좀 더 겹쳐 보기 위해 위치를 조정하였다. 이.. 공감수 0 댓글수 0 2022. 10. 24.
position 속성 1. position 속성 : 요소 배치 방법 지정하기 position : static | relative | absolute | fixed 텍스트나 이미지를 화면 상에 배치하기 위해 사용되는 요소이다. position의 static 속성 값을 제외하고 나머지 속성 값은 좌표를 이용하여 요소의 배치를 지정할 수 있다. top : 위쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 최상단이 top 0 이다. right : 오른쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 가장 오른쪽 변이 right 0 이다. bottom : 아래쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 하단이 bottom 0 이다. left : 왼쪽에서 얼마나 떨어져 있는지 나타낸다. 문서의 가장 왼쪽 변이 left 0이다. 2. sta.. 공감수 0 댓글수 0 2022. 10. 24.
float, clear 속성 1. float 속성 : 왼쪽이나 오른쪽으로 배치하기 float : left | right | none float 속성을 적용한 요소는 속성 값에 따라 배치가 되는데 이 위치에 따라 다음 요소가 배치되는 곳이 달라진다. float 속성을 적용하지 않은 예시를 먼저 살펴보도록 하자. 사회보장·사회복지 국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다. 연소자의 근로는 특별한 보호를 받는다. 모든 국민은 종교의 자유를 가진다. 정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 법률안에.. 공감수 0 댓글수 0 2022. 10. 21.
여백(margin, padding)을 조절하는 속성 1. margin 속성 : 요소 주변 여백 설정하기 margin-top : | | auto margin-right : | | auto margin-bottom : | | auto margin-left : | | auto margin : | | auto 1️⃣ 크기 : 마진 값을 px 나 em 등의 단위로 지정할 수 있다. 2️⃣ 백분율 : 박스 모델을 포함하고 있는 부모 요소를 기준으로 % 지정한다. 3️⃣ auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. 마진은 요소 주변의 외부 여백이다. 즉 마진을 이용하면 다른 요소와의 거리(간격)을 조절할 수 있게 된다. 네 방향 모두 다르게 마진 값을 지정하거나, 한 번에 지정할 수도 있다. margin : 30px 50px;.. 공감수 0 댓글수 0 2022. 10. 21.
테두리 관련 속성 1. border-style 속성 : 테두리 스타일 지정하기 border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid 2. border-width 속성 : 테두리 두께 지정하기 border-top-width : | thin | medium | thick border-right-width : | thin | medium | thick border-bottom-width : | thin | medium | thick border-left-width : | thin | medium | thick border-width : | thin | medium | thick 테두리는 네 방향을 따로 지정.. 공감수 0 댓글수 0 2022. 10. 21.
박스 모델 속성 1. 박스 모델 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 : width 속성을 100% 가지고 있는 요소로 혼자 한 줄 전체를 차지한다. 인라인 레벨 : 콘텐츠 크기만큼만 영역을 차지해서 옆에 다른 요소가 올 수 있다. 블록 레벨 태그 , ~ , , , , , , , , , 인라인 레벨 태그 , , , , , , , , , 2. width, height 속성 : 콘텐츠 영역의 크기 width : | | auto height : | | auto width 속성은 콘텐츠 영역의 너비를, height 속성은 콘텐츠 영역의 높이를 결정한다. 크기 : 너비 혹은 높이 값을 px 이나 em 같은 단위로 지정한다. 값은 고정적이라 화면의 크기 변화에 영향을 받지 .. 공감수 0 댓글수 0 2022. 10. 20.
그라데이션 효과주기 1. 선형 그라데이션 : 방향과 각도 background : liner-gradient( to , color-step...]) 선형 그라데이션은 각도와 방향에 따라 그라데이션이 퍼져 나간다. 방향은 'to' 키워드와 함께 쓰이며 다음과 같은 값을 가진다. 1️⃣ to top : 아래에서 위로 그라데이션이 만들어 진다. 2️⃣ to bottom : 위에서 아래로 그라데이션이 만들어 진다. 기본값 3️⃣ to right : 왼쪽에서 오른쪽으로 그라데이션이 만들어 진다. 4️⃣ to left : 오른쪽에서 오른쪽으로 그라데이션이 만들어 진다. 이들을 결합해서 to right bottom (오른쪽 아래로) 사용할 수도 있다. 색상의 방향은 각도로도 지정할 수 있다. 각도는 deg 값으로 표기하고 맨 윗 부분은 .. 공감수 1 댓글수 0 2022. 10. 19.
배경 색과 배경 이미지 1. background-color 속성 : 배경 색 지정하기 background-color : 영역의 배경 색을 지정할 수 있는 속성으로 색상 부분에는 16진수, rgb, hsl, 색상 명 등을 사용할 수 있다. 기본적으로 모든 웹 문서의 요소는 배경 색이 투명 값으로 지정되어 있다. 이러한 이유로 영역이 상대적으로 큰 body 태그 등에서 배경 색을 입힌 경우, 마치 자식 태그의 영역 또한 해당 스타일을 상속한 것 처럼 배경 색이 입혀졌다고 생각할 수 있지만 앞서 말한 것처럼 배경 색을 따로 지정하지 않은 경우에는 투명이기 때문에 자식 태그는 아직 투명한 상태로 뒤에 위치하는 부모 태그의 배경 색상이 비쳐보이는 것뿐이다. 2. background-clip 속성 : 배경 적용 범위 조절하기 backgr.. 공감수 0 댓글수 0 2022. 10. 19.
웹에서 색상 표현하기 1. 16진수 표기법 16진수로 색상을 표기하는 방식으로 반드시 # 을 포함하여 작성한다. 6자리로 나타내는 것이 가장 기본적인 방식이며, 각 두 자리씩 빨간색, 초록색, 파란색을 나타낸다. #RRGGBB 위는 색상만 나타낸 것으로 실제 들어갈 수 있는 값은 다음과 같다. 10 진수 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 진수 0 1 2 3 4 5 6 7 8 9 a b c d e f 값이 커질수록 흰색에 가까워지고, 값이 작아질수록 검정색에 가까워진다. #ffffff : 흰색 #000000 : 검정색 위처럼 값이 두 자리씩 중복되는 경우에는 다음과 같이 줄여 쓸 수 있다. #fff : 흰색 #000 : 검정색 이는 사용의 편의성 때문에 가능한 것으로 실제로 값은 여섯 자.. 공감수 0 댓글수 0 2022. 10. 19.
ul, ol 목록 스타일 적용 : 불릿 변경과 삭제, 이미지로 변경, 들여 쓰기 1. list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기 list-style-type : none | | 🔷 순서 없는 목록의 불릿 모양 바꾸기 - disc(⚫) : 채운 원 (기본 값) - circle(🔘) : 빈 원 - squre(⬛) : 채운 사각형 - none : 불릿 없애기 적용 안 함 순서 없는 목록의 기본값 불릿 순서 없는 목록의 기본값 불릿 순서 없는 목록의 기본값 불릿 순서 없는 목록의 기본값 불릿 순서 없는 목록의 기본값 불릿 불릿 모양 변경 순서 없는 목록의 불릿 변경 순서 없는 목록의 불릿 변경 순서 없는 목록의 불릿 변경 순서 없는 목록의 불릿 변경 순서 없는 목록의 불릿 변경 불릿 제거 순서 없는 목록의 불릿 제거 순서 없는 목록의 불릿 제거 순서 없는 목록.. 공감수 0 댓글수 0 2022. 10. 19.
텍스트의 문단 스타일 적용 : 정렬과 들여 쓰기 1. text-align 속성 : 텍스트, 이미지 정렬하기 text-align : start | end | left | right | center | justify | match-parent text-align 속성으로는 텍스트를 정렬할 수 있게 된다. 주로 사용되는 속성 값은 위와 같이 네 가지 값이 있다. 1️⃣ left : 문단을 왼쪽 정렬 2️⃣ right : 문단을 오른쪽 정렬 3️⃣ center : 문단을 가운데 정렬 4️⃣ justify : 문단을 양쪽 정렬 📌 text-align 속성 사용 시의 주의 사항 text-align 속성은 사용 가능한 환경이 한정적이다. block 레벨의 태그 안에 있는 inline 레벨의 태그를 정렬할 수 있게 되는데 text-align 속성은 바로 이 bloc.. 공감수 0 댓글수 0 2022. 10. 19.
텍스트에 스타일 적용 : 색상, 줄, 대소문자, 그림자, 공백 1. color 속성 : 글자 색 지정하기 color : color 속성에서 사용하는 색상 값은 16진수, rgb(또는 rgba), hsl(또는 hsla), 색상 이름으로 작성 가능하다. 📌 a 는 alpha 알파 값은 투명도를 나타내는 단위로 작을수록 투명해지고 클수록 불투명 해진다. 2. text-decoration 속성 : 텍스트에 줄 표시하기 text-decoration : none | underline | overline | line-through 여기는 줄이 없어요. 여기는 줄이 밑줄이에요. 여기는 줄이 위에 줄이 있어요. 여기는 줄이 가운데에 줄이 있어요. 기본적으로 none 이기 때문에 표시하지 않지만, a 태그를 사용할 때는 underline 이 기본적으로 생기기 때문에 디자인 적으로 이.. 공감수 0 댓글수 0 2022. 10. 19.
글꼴 관련 스타일 적용 1. font-family 속성 : 글꼴 지정하기 font-family : "글꼴 이름",... font-family 속성을 통해서는 웹 상에 표현될 문자의 글꼴을 지정할 수 있다. 글꼴 이름의 사이에 띄어 쓰기가 있는 경우에는 반드시 큰 따옴표와 함께 표기해야 한다. font-family : "맑은 고딕", 돋움, 굴림 또한 여러 개의 글꼴을 지정할 수 있는데 이는 맑은 고딕이 적용되지 않으면 돋움을, 돋움도 적용되지 않는다면 굴림으로 글꼴을 적용하라는 의미이다. 표준 글꼴 🔷 한글 : 굴림, 궁서, 돋움, 바탕 🔷 영어 : serif, sans-serif 하지만 이렇게 지정한 글꼴이 사용자의 컴퓨터에 설치되지 않았다면 전혀 다른 형태의 글꼴이 적용될 수도 있다. 이러한 경우를 대비하기 위해 몇 가지 .. 공감수 0 댓글수 0 2022. 10. 19.
CSS 스타일 우선 순위 CSS 는 Cascading 의 약자로 위에서 아래로 흐르는 스타일 시트라는 뜻이다. 즉, 지정해놓은 스타일 속성을 위에서 아래로 살펴 적용시킨다는 의미이다. 그렇다면 어떤 스타일을 적용시켜야 할지 어떻게 판단할 수가 있을까? 그건 바로 스타일에도 각자의 우선되는 원칙이 있기 때문에 적절한 스타일의 적용이 가능하다. 1. 스타일 우선 순위 - 중요도에 따른 우선 순위 스타일의 우선 순위는 먼저 스타일이 어디에서 선언되었는지에 따라 그 중요도를 달리 판단한다. 1️⃣ 사용자 스타일 시트의 중요 스타일 2️⃣ 제작자 스타일 시트의 중요 스타일 3️⃣ 제작자 스타일 시트의 일반 스타일 4️⃣ 기본적인 브라우저 스타일 시트 1️⃣ 사용자 스타일 시트의 중요 스타일 가장 최우선적으로 적용되는 스타일은 바로 사용자.. 공감수 0 댓글수 0 2022. 10. 18.
<style> 적용 위치 1. 내부 스타일 시트 여기서 말하는 내부란 스타일이 적용될 웹 문서를 말하는 것으로, 내부 스타일 시트 2. 외부 스타일 시트 외부에 CSS 파일을 만들어서 해당 스타일을 적용하고자 하는 웹 문서에 적용하는 방식이다. 부분에 다음과 같이 적용 가능하다. rel 속성에는 불러오고자 하는 파일이 css 인 경우 반드시 stylesheet 를 작성해줘야 하며 해당 속성이 없으면 제대로 동작하지 않는다. href 속성은 이전에도 사용했듯이 파일의 경로를 작성해주면 된다. 3. 인라인 스타일 인라인 스타일은 별도의 스타일 시트를 구성하지 않고, 태그 자체에 style 속성을 이용하여 적용하는 것을 말한다. 모든 태그에서 위와 같이 적용이 가능하지만, 인라인 스타일로 스타일을 적용하게 되면 다른 css 적용이 힘.. 공감수 0 댓글수 0 2022. 10. 17.

문의안내

티스토리
로그인
고객센터

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