반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 메이븐
- sqldeveloper
- springaop
- mybatis
- Oracle
- SpringMVC
- progressive web app
- JavaScript 내장객체
- 스프링
- javascript
- 자바스크립트
- TodayILearned
- 자바프로그래밍
- HTML
- 국비지원
- CSS
- PWA
- web
- tdd
- TIL
- 프로그레시브웹앱
- sql
- maven
- framework
- js
- 오라클
- 서브쿼리
- 생활코딩
- 프레임워크
- javaprogramming
Archives
- Today
- Total
1cm
자바 프로그래밍_Day_50_CSS_선택자_우선순위 본문
반응형
2021. 10. 28
> CSS 선택자 우선순위
-> 적용 방법에 따른 순위
-> 태그 스타일 -> class 스타일 -> id 스타일 -> 인라인 스타일 -> important
-> 소스 순서에 따른 순위
-> 나중에 작성된 스타일 적용
> 실습 코드와 출력 결과
-> 03_선택자우선순위.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 우선순위</title>
<style>
h1 {
color: hotpink;
}
h1 {
background-color: seagreen;
color: red;
}
#test1 {
background-color: hotpink;
/* width: 300px;
height: 300px; */
}
/* background-color 적용 안 됨 :
동일한 div내에 태그여도 id선택자가 클래스 선택자보다 우선순위가 더 높아서 클래스 선택자에는 적용 X */
.test1 {
background-color: yellowgreen;
color: white;
}
/* 스타일은 위에서 아래로 흐르고, 위에 width/height 중복이 없기 때문에 정의가 가능하다. */
div {
width: 300px;
height: 300px;
background-color: tomato; /* 적용 안 됨 */
}
#test2 {
width: 300px;
height: 300px;
background: yellow;
color: black;
}
.test2 {
background: black; /* 위에서 이미 적용했기 때문에 적용 안 됨 */
color: purple;
}
/* !important로 우선순위를 최상위로 만들어주면 무조건 최종 적용이 된다. */
p {
background-color: springgreen !important;
color: purple !important;
font-size: x-large;
}
</style>
</head>
<body>
<h1>선택자 우선순위</h1>
<p>
기본적으로 CSS 속성은 위에서부터 아래로 적용이 되지만, <br>
같은 태그에 다양한 선택자로 CSS 속성이 설정된 경우에는 우선순위에 따라 스타일이 적용된다.
<br><br>
태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 선택자 < !important
</p>
<h3>선택자 우선순위 테스트</h3>
<!-- id선택자보다 인라인 선택자(sytle=...)가 우선순위가 더 높아서 violet이 적용된다. -->
<div id="test1" class="test1" style="background-color: violet;">우선순위 테스트 1</div>
<p id="test2" class="test2">우선순위 테스트 2</p>
</body>
</html>
> 텍스트 스타일 - 크기 기본 단위 구성
| 구분 | 단위 | 내용 |
| 상대 크기 | em | 부모 요소의 크기가 기준 배수를 의미, 1배 = 1em = 100%와 같음 |
| rem | 최상위의 부모 요소의 크기 기준으로 배수 | |
| % | 기본 설정된 크기에서 상대적으로 크기 설정 (초기 설정 100%) | |
| 절대 크기 | px | 기본 지정된 크기 |
| pt |
> 글꼴 속성
-> font-family
-> 폰트의 글골을 설정해주는 속성으로 글꼴1이 없으면 글꼴2, 글꼴3으로 선택되어 설정되고, 다 없으면 브라우저 기본 글꼴 적용
-> font-size
-> 글자 크기 조절 속성으로 em, px, pt 단위가 있음
-> font-weight
-> 글자 굵기 조절 속성으로 normal, bold, bolder(기본보다 더 굵게 표시), lighter(기본보다 더 가늘게 표시), 숫자 100~900(400: normal, 700: bold / 미세 조절 가능)으로 속성을 적용 시킬 수 있음
-> font-variant
-> 영어를 작은 대문자로 표시해주는 속성
-> font-style
-> 글자를 이텔릭체로 표시하는 속성
-> italic : 처음부터 기울어진 글자 존재 / oblique : 기본 글자를 기울여서 표시
-> font
-> 글꼴 속성을 모아서 표현할 수 있는 속성
-> font: font-style font-variant font-weight font-size/line-height font-family
> 텍스트 스타일
-> color
-> 글자 색 지정 속성 (지정 방법 : rgb(000, 000, 000) / brown / #ff0000)
-> text-decoration
-> 글자에 밑줄, 취소선, 윗 선을 긋거나 밑줄을 표시하지 않는 속성
-> none(밑줄 삭제), underline(밑줄 표시), overline(윗줄 표시), line-through(취소선 표시)
-> text-transform
-> 영문자를 표시할 때 대소문자를 원하는 대로 바꿀 수 있는 속성
-> none(변환 X), capitalize(시작하는 첫 번째 글자 대문자 변환), uppercase(모든 글자 대문자 변환), lowercase(모든 글자 소문자 변환)
-> text-shadow
-> 텍스트 그림자 효과주는 속성
-> 선택자{text-shadow: none or 가로 세로 번짐 색상;} -> 여러 개 사용할 때 ","로 구분하여 그림자로 활용 가능
-> white-space
-> 공백 처리 속성
-> normal (여러 개의 공백 하나로 표시)
-> nowrap (여러 개의 공백 하나로 표시, 줄 바꾸지 않고 한 줄 표시)
-> pre (여러 개의 공백 그대로 표시)
-> pre-line (여러 개의 공백 하나로 표시, 영역 넘어갈 시 자동 줄 바꿈)
-> pre-wrap (여러 개의 공백 그대로 표시, 영역 넘어갈 시 자동 줄 바꿈)
-> letter-spacing
-> 낱개 글자 간격 조정 속성
-> word-spacing
-> 단어와 단어 사이 간격 조정 속성
> 문단 스타일
-> direction
-> 글자 쓰기 방향 지정 : ltr(왼쪽에서 오른쪽으로 텍스트 표시), rtl(오른쪽에서 왼쪽으로 텍스트 표시)
-> text-align
-> 문자 위치 조정(정렬) 속성 : left, right, center, justify(양쪽 정렬)
-> text-indent
-> 문장 들여쓰기 속성
-> ling-height
-> 문장끼리의 줄 간격 조정 속성
-> text-overflow
-> 영역 벗어나는 텍스트 표시 속성
-> clip : 영역을 넘어가는 텍스트 자름
-> ellipsis : 말 줄임(...)으로 잘린 텍스트 표현
> 목록 스타일
-> list-style-type
-> 목록 기호의 스타일 지정 속성
| ul | disc | 흑색 원형 |
| circle | 흰색 원형 | |
| square | 흑색 사각형 | |
| none | 기호 표시 X | |
| ol | decimal | 1로 시작하는 십진수 |
| decimal-leading-zero | 앞에 0이 붙은 십진수 | |
| lower-roman / upper-roman | 소문자 / 대문자 로마자 | |
| lower-alpha / lower-latin | 소문자 알파벳 | |
| upper-alpha / upper-latin | 대문자 알파벳 |
-> list-style-image
-> 기호 대신 이미지 삽입
-> 선택자{list-style-image: url(이미지 경로);}
-> list-style-position
-> 목록 기호 들여쓰기
-> inside : 불릿, 숫자를 안쪽으로 들여씀
-> outside : default, 불릿, 숫자를 밖으로 내어 씀
-> list-style
-> 목록 스타일 한 번에 지정 속성
-> 선택자{list-style: typer값 position값 image값;}
> 실습 코드와 출력 결과
-> 04_텍스트스타일.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 스타일</title>
<link rel="stylesheet" href="./04_텍스트스타일.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
</head>
<body>
<h1>텍스트 스타일</h1>
<h3>font-family</h3>
<p>
텍스트의 글꼴을 지정할 때 사용한다.
</p>
<p id="ff1">글꼴 변경 테스트 1</p>
<p id="ff2">글꼴 변경 테스트 2</p>
<p id="ff3">글꼴 변경 테스트 3</p>
<h3>웹 폰트 사용하는 방법</h3>
<p>
웹 폰트 제공 사이트
<a href="http://fonts.google.com">구글 웹 폰트</a>
</p>
<p id="web-font">웹 폰트 테스트</p>
<hr>
<h2>font-size</h2>
<p>
텍스트의 크기를 변경할 때 사용한다.
</p>
<ul>
<li id="size1">px 테스트</li>
<li id="size2">em 테스트</li>
<li id="size3">% 테스트</li>
</ul>
<hr>
<h2>font-weight</h2>
<p>
글자의 두께를 변경할 때 사용한다.
</p>
<ul>
<li style="font-size: 2em;">원래 굵기</li>
<li id="fw1">굵은 글꼴</li>
<li id="fw2">원래 굵기보다 가늘게</li>
<li id="fw3">굵은 글꼴보다 더 굵게</li>
</ul>
<hr>
<h2>font-variant</h2>
<p>
작은 대문자로 변경할 때 사용한다.
</p>
<p>I LOVE YOU</p>
<p id="fv">i love you</p>
<hr>
<h2>font-style</h2>
<p>
텍스트의 기울임을 지정할 때 사용한다.
</p>
<ul>
<li id="fs1">italic 테스트</li>
<li id="fs2">oblique 테스트</li>
</ul>
<h2>color</h2>
<p>
텍스트의 색상을 지정할 때 사용한다.
</p>
<ul>
<li id="c_name">색상명으로 지정</li>
<li id="c_16">16진수 값으로 지정</li>
<li id="c_rgb">rgb로 지정</li>
<li id="c_rgba">rgba로 지정</li>
</ul>
<hr>
<h2>text-decoration</h2>
<p>
텍스트에 줄을 긋거나 줄을 없앨 때 사용한다.
</p>
<ul>
<li id="td1">텍스트 아래에 줄 긋기</li>
<li id="td2">텍스트 중간에 줄 긋기</li>
<li id="td3">텍스트 위에 줄 긋기</li>
<li><a href="#" id="td4">하이퍼 링크 밑줄 없애기</a></li>
</ul>
<hr>
<h2>text-transform</h2>
<p>
영문 텍스트의 대소문자 변환시 사용한다.
</p>
<ul>
<li id="tt1">none</li>
<li id="tt2">capitalize hello</li>
<li id="tt3">uppercase</li>
<li id="tt4">LOWERCASE</li>
</ul>
<hr>
<h2>text-shadow</h2>
<p>
텍스트에 그림자 효과를 줄 때 사용한다.
</p>
<div id="bg">
<span id="ts1" class="shadow">HTML5</span>
<span id="ts2" class="shadow">HTML5</span>
<span id="ts3" class="shadow">HTML5</span>
<span id="ts4" class="shadow">HTML5</span>
</div>
<hr>
<h2>letter-spacing과 word-spacing</h2>
<h3>letter-spacing</h3>
<p>
낱개 글자의 간격을 조정하고 싶을 때 사용한다.
</p>
<p id="spacing1">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
예를 들어 '캠핑'을 검색하면 사용자의 성별·연령에 따라 관심사가 높을 만한 순서대로 △캠핑 준비물 리스트 △초보캠핑 △캠핑장비 △감성캠핑 △차박용품 등 다양한 주제별 스마트블록을 볼 수 있다. 이를 통해 사용자는 자신이 더 탐색하고 싶은 주제에 대한 아이디어를 얻고, 빠르게 정보에 접근할 수 있다.
스마트블록은 현재 취미·인테리어·레시피·원예 등 라이프스타일과 관련된 키워드 일부에 적용되어 있으며, 쇼핑·로컬 등 버티컬 주제로도 확장, 연내 검색결과 약 10~15%까지 단계적으로 확대할 예정이다.
우선 성별·연령 등 그룹별 개인화를 반영했하고 연내 사용자 피드백까지 실시간으로 고려하는 반응형 검색 등을 추가 적용한다.
</p>
<br>
<h3>word-spacing</h3>
<p>
단어와 단어 사이의 간격을 조정하고 싶을 때 사용한다.
</p>
<p id="spacing2">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
예를 들어 '캠핑'을 검색하면 사용자의 성별·연령에 따라 관심사가 높을 만한 순서대로 △캠핑 준비물 리스트 △초보캠핑 △캠핑장비 △감성캠핑 △차박용품 등 다양한 주제별 스마트블록을 볼 수 있다. 이를 통해 사용자는 자신이 더 탐색하고 싶은 주제에 대한 아이디어를 얻고, 빠르게 정보에 접근할 수 있다.
스마트블록은 현재 취미·인테리어·레시피·원예 등 라이프스타일과 관련된 키워드 일부에 적용되어 있으며, 쇼핑·로컬 등 버티컬 주제로도 확장, 연내 검색결과 약 10~15%까지 단계적으로 확대할 예정이다.
우선 성별·연령 등 그룹별 개인화를 반영했하고 연내 사용자 피드백까지 실시간으로 고려하는 반응형 검색 등을 추가 적용한다.
</p>
<hr>
<h1>문단 스타일</h1>
<h2>text-align</h2>
<p>문장을 정렬하고 싶을 때 사용한다.</p>
<h3>왼쪽 정렬</h3>
<p id="ta1">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<h3>오른쪽 정렬</h3>
<p id="ta2">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<h3>가운데 정렬</h3>
<p id="ta3">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<h3>양쪽 정렬</h3>
<p id="ta4">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<hr>
<h2>text-indent</h2>
<p>
문장을 들여쓰기 하고 싶을 때 사용한다.
</p>
<p id="ti">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<hr>
<h2>line-height</h2>
<p>
문장끼리의 줄 간격 조정하고 싶을 때 사용한다.
</p>
<p id="lh">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
<hr>
<h2>text-overflow</h2>
<p>
영역을 벗어나는 텍스트에 대해 지정하고 싶을 때 사용한다.
</p>
<div class="over-class">
<p id="to">
네이버가 인공지능(AI) 중심 새로운 검색 '에어서치'를 28일 공개했다.
에어서치는 에어스(AiRS), 에이아이템즈(AiTEMS), 에어스페이스(AiRSPACE) 등 콘텐츠·쇼핑·로컬 단위 AI 추천기술과 검색을 아우르는 네이버 AI 검색 브랜드다.
김상범 네이버 서치 CIC 책임리더는 “에어서치는 네이버 검색 가장 차별화된 특징이었던 '통합검색' 만큼 네이버의 새로운 검색을 대표하는 큰 변화의 시작이 될 것”이라면서 “에어서치 기반의 검색에서는 '정답'을 찾는 사용자들에게 더 많은 정보를 더 빨리 제공하게 되는 것은 물론, 의도가 다양한 검색에 대해서도 맞춤형 결과를 제공할 수 있다”고 말했다.
에어서치 기반 검색은 누구에게나 동일하게 제공되는 정형화된 컬렉션 단위 검색결과에서 벗어난다. 현재 트렌드와 개인 관심사를 반영해 자신의 취향을 발견할 수 있는 맞춤형 결과를 '스마트블록' 형태로 다양하게 제공한다.
스마트블록은 콘텐츠분석에 기반한 '스마트블록 생성'과 사용자 취향에 기반한 '스마트블록 랭킹' 과정을 통해 사용자에게 제공되며, 각 단계에는 네이버 AI 기술이 반영되어 있다.
</p>
</div>
<hr>
<h1>목록 스타일</h1>
<h2>list-style-type</h2>
<h3>순서없는 목록 스타일</h3>
<h4>채운 원 모양 불렛(기본)</h4>
<ul style="list-style-type: disc;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ul>
<h4>빈 원 모양 불렛</h4>
<ul style="list-style-type: circle;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ul>
<h4>채운 사각형 모양 불렛</h4>
<ul style="list-style-type: square;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ul>
<h4>불렛 없애기</h4>
<ul style="list-style-type: none;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ul>
<h3>순서 있는 목록 스타일</h3>
<h4>1로 시작하는 10진수(기본)</h4>
<ol style="list-style-type: decimal;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h4>앞에 0이 붙는 10진수</h4>
<ol style="list-style-type: decimal-leading-zero;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h4>소문자 로마 숫자</h4>
<ol style="list-style-type: lower-roman;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h4>대문자 로마 숫자</h4>
<ol style="list-style-type: upper-roman">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h4>알파벳 소문자</h4>
<ol style="list-style-type: lower-alpha;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h4>알파벳 대문자</h4>
<ol style="list-style-type: upper-alpha;">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ol>
<h2>list-style-image</h2>
<ul style="list-style-image: url(../resources/image/iconsample.PNG);">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jqeury</li>
</ul>
<br><br><br><br><br>
</body>
</html>
-> 04_텍스트스타일.css
/* font-family 테스트 */
/* body {
font-family: '돋움';
} */
/* @import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap'); */
#ff1 {
font-family: '궁서체'; /* "궁서체", '궁서체', 궁서체 쿼테이션 사용 가능*/
}
#ff2 {
font-family: '굴림체';
}
#ff3 {
font-family: '없는글꼴', '바탕체', '굴림체';
}
#web-font{
font-size: 5em;
font-family: 'East Sea Dokdo', cursive;
}
/* font-size 테스트 */
#size1 {
font-size: 30px;
}
#size2 {
font-size: 2em;
}
#size3 {
font-size: 150%;
}
/* font=weight 테스트 */
#fw1 {
font-size: 2em;
font-weight: bold;
}
#fw2 {
font-size: 2em;
font-weight: lighter;
}
#fw3 {
font-size: 2em;
/* font-weight: bolder; */
font-weight: 900;
}
/* font-variant 테스트 */
#fv {
font-variant: small-caps;
}
/* font-style 테스트 */
#fs1 {
font-style: italic;
}
#fs2 {
font-style: oblique;
}
/* color 테스트 */
#c_name {
color: cornflowerblue;
}
#c_16 {
color: #ff00ff;
}
#c_rgb {
color: rgb(154, 100, 143);
}
#c_rgba {
color: rgba(154, 100, 143, 0.6);
}
/* text-decoration 테스트 */
#td1 {
text-decoration: underline;
}
#td2 {
text-decoration: line-through;
}
#td3 {
text-decoration: overline;
}
#td4 {
text-decoration: none;
}
/* text-transform 테스트 */
#tt1 {
text-transform: none;
}
#tt2 {
text-transform: capitalize;
}
#tt3 {
text-transform: uppercase;
}
#tt4 {
text-transform: lowercase;
}
/* text-shadow */
#bg {
background-color: black;
padding: 50px;
margin: 30px;
}
.shadow {
font-size: 100px;
line-height: 30px;
font-weight: 900;
}
#ts1 {
color: salmon;
text-shadow: 0px 10px 100px white;
}
#ts2 {
color: white;
text-shadow: 0px 0px 50px #fff;
}
#ts3 {
color: white;
text-shadow: 1px 1px 20px yellowgreen;
}
#ts4 {
text-shadow: 0px 0px 4px #ccc,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -19px 18px #f20;
}
/* letter spacing */
#spacing1 {
letter-spacing: 10px;
}
/* word spacing */
#spacing2 {
word-spacing: 10px;
}
/* text-align */
#ta1 {
text-align: left;
}
#ta2 {
text-align: right;
}
#ta3 {
text-align: center;
}
#ta4 {
text-align: justify;
}
/* text-indent */
#ti {
text-indent: 15px;
}
/* line-height */
#lh {
line-height: 30px;
}
/* text-overflow */
.over-class {
background-color: lavender;
width: 500px;
}
#to {
overflow: hidden; /* 영역을 넘어가는 컨텐츠를 잘라버리는 속성 */
white-space: nowrap; /* 컨텐츠를 한 줄로 쭉 표시될 수 있게 하는 속성 */
text-overflow: ellipsis; /* 정해놓은 width를 넘어갔을 때 ...으로 표시하는 속성 */
}
-> 브라우저 출력 결과
반응형
'국비지원_Java > Java Programming_1' 카테고리의 다른 글
| 자바 프로그래밍_Day_52_CSS 스타일, 변형 (0) | 2021.12.07 |
|---|---|
| 자바 프로그래밍_Day_51_CSS_레이아웃_스타일 (0) | 2021.12.07 |
| 자바 프로그래밍_Day_49_CSS선택자 (0) | 2021.11.12 |
| 자바 프로그래밍_Day_48_폼 관련 태그 (0) | 2021.10.30 |
| 자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그 (0) | 2021.10.30 |
'국비지원_Java/Java Programming_1' Related Articles
more
Comments