반응형

 *grid 관련 속성들

grid-template-columns
grid-template-rows
gap(grid-gap)
트랙 관련 함수
 - repeate() : 반복되는 값을 자동으로 처리할 수 있는 함수
 - minmax() : 최소값, 최대값을 각각 지정할 수 있는 함수
 - auto-fill & auto-fit : 반응형을 고려해 사용할 수 있는 키워드들(함수X)


grid-column & row
grid-template-areas
grid-area
align-items
align-self
justify-items
justify-self
align-content
justify-content

반응형

'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글

CSS FLEX  (0) 2024.04.29
다양한 CSS 선택자  (1) 2024.04.28
input 태크 readonly, required  (0) 2024.04.24
CSS 속성 선택자  (0) 2024.04.24
CSS, 테두리 스타일을 지정하는 border-style 속성  (0) 2024.04.21

CSS FLEX

개발 및 관리/HTML, CSS, Javascript, DOM 2024. 4. 29. 17:04 posted by HighLighter
반응형

CSS 레이아웃 - flex & grid #1 강의 소개
https://youtu.be/DxwBN7vdr-A?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
https://youtu.be/7neASrWEFEM

CSS Flexbox와 CSS Grid, 한번에 정리!
https://youtu.be/eprXmC_j9A4

CSS 수업 - flex 1 : intro
https://youtu.be/BS9T0ZMqT58

플렉스(Flex) 유형별 UI 응용 예제 : [웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1)
https://youtu.be/LkKMlbb0dIQ

CSS - Flexbox : 레이아웃을 마음대로!
https://youtu.be/2htMvJdW9O0

반응형
반응형


*** CSS 선택자
태그 선택자 / h1 / 태그로 요소 선택
전체 선택자 / *, / 모든 요소 선택
                / div * / 특정 요소의 자식요소 모두 선택
클래스 선택자 / .slide / 클래스명으로 요소 선택
아이디 선택자 / #memid / 아이디명으로 요소 선택
후손 선택자 / .slide h2, .slide .btn / 후손(자식) 요소 선택 
자식 선택자 / .slide > div / 앞 선택자의 바로 밑 자식요소 선택
인접형제 선택자 / .banner + div / 앞 선택자의 형제 요소 바로 다음 요소 선택
                      / .banner ~ div / 앞 선택자의 형제 요소 형제요소 중 두 번째 요소 모두를 선택
그룹화 / h1, h2color:red / 콤마로 선택자를 나열하여 선택
속성 선택자 / a[target], a[target="_blank"] / 속성명 또는 속성명의 값으로 요소를 선택
가상 선택자 / :visited  / 방문한 링크 선택
                / :hover / 요소에 마우스를 올렸을 때
                / :active / 링크를 누르는 순간
               / :focus / 링크, 버튼, 입력요소 등에 초점이 이동했을 때
               / input:checked / input에 체크되었을 때
의사 요소 선택자 / h1:after content:'-'; / :before, :after (내용의 앞, 뒤)
구조 선택자 / :first-child, :last-child / 첫째 요소, 막내 요소
                / :nth-child(2n), :nth-child(2n+1) / 특정 번재 요소를 수식으로 선택
                / :nth-child(even), :nth-child(odd) / 짝수, 홀수 요소 선택
형태구조 선택자 / :first-of-type , :last-of-type, :nth-of-type(2n) / 같은 태그종류 중 첫째, 막내, 특정 번째 요소를 선택
부정 선택자 / :not(p) / 괄호 안 선택자의 반대 요소를 선택
                / li:not(:last-child) / 막내요소를 제외하고 나머지 요소를 선택


반응형

'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글

CSS, grid 관련 속성들  (0) 2024.05.07
CSS FLEX  (0) 2024.04.29
input 태크 readonly, required  (0) 2024.04.24
CSS 속성 선택자  (0) 2024.04.24
CSS, 테두리 스타일을 지정하는 border-style 속성  (0) 2024.04.21
반응형

register1.css
0.00MB
register1.html
0.00MB

1. readonly, required - 읽기 전용, 필수 값 지정

readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 read하게만 설정

required : form에서 submit 버튼을 눌렀을 때, 반드시 입력하게 설정 / 반드시 값이 있어야 서버 프로그램에 전송됨

 

반응형

'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글

CSS FLEX  (0) 2024.04.29
다양한 CSS 선택자  (1) 2024.04.28
CSS 속성 선택자  (0) 2024.04.24
CSS, 테두리 스타일을 지정하는 border-style 속성  (0) 2024.04.21
CSS, 글자, 텍스트 스타일 속성  (0) 2024.04.20

CSS 속성 선택자

개발 및 관리/HTML, CSS, Javascript, DOM 2024. 4. 24. 20:04 posted by HighLighter
반응형

CSS 속성 선택자

[속성] / 해당 속성이 있는 요소 / [required]
[속성 = 값] / 지정한 속성값이 있는 요소, 100% 단어가 동일해야함 / [target = _blank]
[속성 ~= 값] / 지정한 속성값이 포함된 요소(단어별) / [class ~= button]
[속성 |= 값] / 지정한 속성값이 포함된 요소(하이픈 포함, 단어별) / [title |= us]
[속성 ^= 값] / 지정한 속성값으로 시작하는 요소 / [title ^= eng]
[속성 $= 값] / 지정한 속성값으로 끝나는 요소 / [href $= xls]
[속성 *= 값] / 지정한 속성값의 일부가 일치하는 요소 / [href *= w3]

반응형
반응형

테두리 스타일을 지정하는 border-style 속성

none : 테두리가 없다. Default 값
hidden : 테두리 감추기
solid : 실선
dotted : 점섬
dashed : 짧은 직선
double : 이중선

반응형
반응형

CSS, 글자, 텍스트 스타일 속성

1. 글자와 관련된 속성
 font-family : 글꼴 종류
 font-size : 글자 크기
 font-style : 글자 스타일 지정
 font-weight : 글자 굵기

2. 텍스트 스타일 속성
 color : 색상 
 text-decoration : 밑줄, 위에선, 취소선 등 
 text-transform : 텍스트 전체 혹은 첫 글자를 대문자로 표시
 text-shadow : 텍스트에 그림자 추가
 letter-spacing : 글자 사이에 간격 지정
 word-spacing : 단어 사이에 간격 지정
 text-align : 텍스트 정렬 방법 지정
 line-height : 줄 간격 조절

반응형
반응형

자바스크립트 이벤트
- 이벤트 : 사용자의 입력 작업이나 시스템 상황의 변화 등의 사건
- 이벤트 핸들러 : 이벤트가 발생했을 때 그에 따른 행위를 결정하는 것
- 예시
 onLoad : 문서를 읽을 때 
 onFocus : 포커스를 얻을 때
 onBlur : 포커스를 잃었을 때
 onMouseOver : 마우스가 대상의 링크나 영역 안에 위치할 때 발생되는 이벤트 처리
 onMouseOut : 마우스가 대상의 링크가 영역 안을 벗어날 때 발생되는 이벤트 처리
 onMouseDown : 마우스 버튼을 눌렀을 때 발생

반응형
반응형

자바스크립트, Window 객체 - 웹 브라우저 창을 위한 속성과 메소드 제공

alert() : 경고 창을 보여줌
confirm() : 확인 대화상자 보여줌
open() / close() : 새 창 열기/창 닫기
setInterval() : 일정 시간마다 지정된 명령을 주기적으로 실행

반응형
반응형

*** Array 객체의 메서드


concat : 기존 배열에 요소를 추가해 새로운 배열을 생성
every : 배열의 모든 요소가 주어진 함수에 대해 참이면 true 리턴하고, 그렇지 않으면 false 리턴
filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 생성
forEach : 배열의 모든 요소에 대해 주어진 함수 실행
indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스 찾음
join : 배열 요소를 문자열로 합침. 이때 구분자를 지정 가능함
push : 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환함
unshift : 배열의 시작 부분에 새로운 요소를 추가
pop : 배열의 마지막 요소를 꺼내 그 값을 결과 반환
shift : 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환
splice : 배열에 요소를 추가하거나 삭제
slice :  배열에서 특정한 부분을 잘라 냄
reverse : 배열의 배치 순서를 역순으로 만듬
sort : 배열 요소를 지정한 조건에 따라 정렬
toString : 배열에서 지정한 부분을 문자열로 반환. 이때 각 요소는 쉼표(,)로 구분

반응형