Class/Frontend15

• [프론트 엔드 DAY11] 1. CSS 애니메이션 요소의 현재 스타일을 다른 스타일로 변화 적용할 스타일은 이전 프레임에 적용하는 것이 아니라 초기 스타일에 적용 ( css관련 속성 ) name: moving (애니메이션 이름) duration : 3s (얼마동안) count : infintite (몇 회 반복) direction: alternate (왕복과 편도) normal: 완료후 초기상태로 alternate : 한번 끝까지 하고 반대로 진행 reverse: 프레임을 거꾸로 진행 ex) @keyframes 애니메이션{ from 혹은 0%{ 처음에 적용할 스타일 } 정수% (50%, 70%.. 80%...){ 중간 지점마다 적용할 스타일 } to 혹은 100%{ 마지막에 적용할 스타일 } } animation -1 CSS An.. Class/Frontend 2022. 5. 26.

• 

  [프론트 엔드 DAY10] 1. css 2D / transform 이차원 좌표에서 요소를 변형시키는 속성 이동, 확대/축소, 회정, 경사 등믈 만들수 있음 translate, scale, rotate , skew liner-gradient background: liner-gradient (방향, 색상1, 색상2) 방향은 생략이 가능하며 벤더 프리픽스도 생략 가능 방향에 가로방향 (left, right)을 작성시에는 벤더 프리픽스를 반드시 작성해 주어야함 벤더프리릭스 (vendor prefix) 주요 웹 브라우저 공급자가 (safari, ie, chorm...) 새로운 실험적인 기능을 제공할때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할때 벤더프릭스.. Class/Frontend 2022. 5. 25.

• 

  [프론트 엔드 DAY09] 1. 미디어 쿼리 width, height , color ..속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절 컨텐츠를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 따라 알맞은 형태로 스타일을 조정 장점: UI 고급화, 유지관리와 업데이트 단잠: 구현이 어렵다 , 다운로드 속도가 느려진다. @media 매체유형 and 조건...{ 적용할 스타일 코드 } 매체 유형 all : 모든 매체 screen : 컴퓨터, 태블릿 , 핸드폰 ... print : 프린터 기기 speech : 스크린 리더 모바일: ~480px 모바일 가로, 태블릿 : 480px ~767px 태블릿 가로 : 768px ~ 1023px 낮은 해상도 pc , 태블릿 가로: ~1024px 이 이후는 그냥 pc :.. Class/Frontend 2022. 5. 24.

• 

  [프론트 엔드 DAY08] 1. flex flex : 플렉시블 레이아웃(flex) 대부분의 웹 사이트는 수직 구성 레이아웃 구성 시 가장 많이 사용되는 요소들은 대부분 블록 개념이기 때문에 수직 수정은 쉽게 할수 있으나 수평 구성은 구현하기가 쉽지 않음 과거에는 수평구성은 float, inline-block으로 구성 현재 조금 더 쉽게 수평 구성을 하기 위하여 flex 를 사용한다. > display: flex; flex-1 1 2 3 전체적인 container 의 사이즈 넓이 1000px 높이 500px 을 정해준후 display : flex; 로 수평정렬해준다 .이 container 안에 넣을 div 값의 사이즈를 정해준다. 각각 div 넓이를 400 으로 잡아준후 , 1px 의 border solid 값을 .. Class/Frontend 2022. 5. 23.

• 

  [프론트 엔드 DAY07] css position 요소의 위치를 결정하는 방식을 설정 1. 정적 위치 지정방식 (static) 기본값 html 요소의 위치를 결정하는 기본적인 방식 top, left, right, bottom 속성들을 사용할수 없음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정 2. 상대 위치 지정방식 (relative) HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식을 기본 위치는 정적 위치 지정방식일 때 결정되는 위치를 의미 - 입력 코드- 상대 위치 지정방식 상대위치 지정방식1 상대 위치 지정방식2 자식div - 입력 스타일 코드- 3. 고정 위치 지정방식 (fixed) 뷰포트를 기준으로 위치를 설정하는 방식 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치.. Class/Frontend 2022. 5. 9.

• 

  [프론트 엔드 DAY06] 1.박스 사이징 - width, height 높이와 길이를 부여 / 이 높이와 길이에는 padding이나 border 영역은 포함하지 않음 * box-sizing:content-box: 기존 계산법, width와 height 포함하지 않겠다 * box-sizing:border-box: width와 height에 padding, border를 포함 만약 width 100%로 설정된 경우 padding이나 border 속성을 추가할 수 없음. 그러니까 여기에 padding을 주려면 border-box를 사용하여 포함한 길이가 100% 되도록 - 입력 코드 - 박스사이징 - 스타일 코드 작성- - 출력 결과 - - 개발자 도구 켜봐서 비교하기 - 1번의 박스 content 박스의 스타일이 넣어졌을땐 컨텐츠+패.. Class/Frontend 2022. 5. 2.

• 

  [프론트 엔드 DAY05] 📌CSS background 에 쓰이는 용어 정리 📌 background-color HTML 요소의 배경색 설정 background-repeat 배경이미지를 수평이나 수직 방향으로 반복하도록 설정 (repeat, repeat-x, repeat-y, no-repeat(반복안함)) background-image HTML 요소의 배경으로 나타날 배경 이미지를 선택 배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남 ex) background-image: url("이미지파일 경로"); background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 %나 px을 사용하여 상대위치를 정할 수 있음 상대위치를 정하는 기준은 해당 요소의 왼쪽 상단 background-attachment 위치.. Class/Frontend 2022. 4. 27.

• 

  [프론트 엔드 DAY04-1] CSS 텍스트 📌CSS 텍스트에 쓰이는 용어 정리 📌 color 텍스트의 색상 letter-spacing 글자 사이 간격 text-align 텍스트 정렬 line-height 텍스트의 줄 간격(높이)를 설정 ( *장평 ) text-indent 첫 줄의 들여쓰기 text-decoration 텍스트에 여러가지 효과를 설정하거나 제거 text-transform 텍스트에 포함된 영문자에 대해 대소문자를 결정 font-variant 소문자를 작은 크기의 대문자로 변경 text-shadow 텍스트의 그림자 효과를 설정 white-space 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정 text-overflow 텍스트가 기준선을 벗어난 경우 텍스트를 어떻게 처리할 것인지 설정 font-size 텍스트의.. Class/Frontend 2022. 4. 27.

• 

  [프론트 엔드 DAY04] 전시간 css 선택자 추가 내용 10. 속성선택자 2 [속성명 = "속성값"] -> 속성 값이 완벽히 일치한 경우 [속성명 ~= "속성값"] -> 값이 속성값과 다른 값이 띄어쓰기로 있는 경우 [속성명 *= "속성값"] -> 속성값이 포함된 문자를 가지고 있는 요소를 선택 [속성명 $= "속성값"] -> 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 [속성명 |= "속성값"] -> 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고 있는 요소를 선택 ex) | = 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택 [속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 요소를 선택 - 코드 입력- 속성 선택자 -2 독립적인 단어 하이픈이 들.. Class/Frontend 2022. 4. 26.

• 

  [프론트 엔드 DAY03- 2] 5. 그룹 선택자 - 여러개의 요소를 나열하고 , 로 구분해 스타일을 적용 / 여러 선택자를 동시에 선택해 올 때 사용 EX) 선택지1, 선택지2{ css 문법 } - 코드 입력 - 그룹 선택자 여러개의 요소를 나열하고 ,(쉼표)로 구분해 스타일을 적용 선택자는 다양하게 사용이 가능 - 그룹 선택자 코드 설명- 태그 안 h2, 의 p 태그 안 텍스트 정렬 : 가운데 에다 하겠음. h2, 의 p태그 안 bigText 태그의 폰트에 사이즈 값을 주었음. h2 태그에 컬러 값 레드. p 태그에 컬러 값 블루 . 이렇게 여러개의 요소를 , (쉼표) 로 나누어 구분해 스타일을 적용한다. - 출력 결과- 6. 자손 선택자 - 부모 요소 하위의 모든 요소에 스타일을 적용 / 자손에는 자식, 손자, 후.. Class/Frontend 2022. 4. 25.

• 

  [프론트 엔드 DAY03-1 ] 📌CSS 적용법 📌 1. 인라인 스타일 - html 요소 내부에 Style 속성을 적용하는 방법 EX) ... 해당 요소에만 스타일이 적용 - 입력 코드- text-align > 텍스트 위치 font-size > 텍스트 폰트 크기 인라인 스타일 html 요소 내부에 style 속성을 사용하여 적용하는 방법 - 출력 결과- 2. 내부 스타일 - HTML 문서의 - 입력 코드- 외부 스타일 css 를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 - CSS 코드- - 출력 결과- 📌CSS 의 선택자 📌 1. 전체 선택자 - 스타일 모든 요소에 적용 디테일 한 스타일은 전체 선택자와 body에 적용된 스타일보다 우선시 됨 ex ) * 하고 입력되는 것들이 = 전체 선택자로 됨 *{ css 문법 } - .. Class/Frontend 2022. 4. 19.

• 

  [프론트 엔드 DAY03] 1. 시멘틱 웹 태그를 쓰는 이유 - 세상에 방대하게 퍼져 있는 웹 문서를 보다 쉽고 정확하게 구분하고 조합하기 위한 시멘틱 웹 태그를 사용하게 됨. (1) 웹 접근성 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리키는 것 (2) 검색 엔진 검색엔진의 자체 알고리즘이 키워드를 구별하는데 이때 해당 알고리즘이 시멘틱 태그를 읽어 더욱 정확한 내용을 전달하여 검색 엔진 상위 문서에 노출될수 있도록 해줌 (3) 가독성 - 구성원들과 같이 작업하거나, 누구나 나의 파일을 열어봤을때 작업 영역을 알아보기 쉽게 하기 위해 - 예시 1- ... - 예시 2 - ....... ... ... > 예시로 봤을때 2번이 더 어떤 영역에서 작업을 하였는지 쉽게 알수 있다. 2.. Class/Frontend 2022. 4. 17.