분류 전체보기48

• [프론트 엔드 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.

• [모던 자바스크립트 01. ] day01. "빨리 가는 유일한 방법은 제대로 가는것이다." " 시행착오는 개발자의 벗이자 선생님입니다." 프로그래머의 역할 - 요구사항 기반으로 문제 해결 방안을 고안하고, 이를 코드로 구현해야 하는것. 이때 구현 하는 코드가 의도한대로 정확히 동작해야 한다. 예측이 가능해야 하며, 유지보수가 쉽게 되야한다. 협업을 할때에는 "명확한 의사소통" 을 해야하는데 문맥에 맞는 정확한 용어를 구사할때 가능해지는것이다. 정확한 용어를 구사하기 위해서는 기본 개념이 확실하게 성립되어 있어야 한다. 또한, 기본 개념은 특정 프로그래밍 언어에 국한되지 않은 경우가 많아 다른 언어를 학습할때 큰 도움이 된다. "동작 원리"의 이해는 코드의 동작을 예측 가능하게 하며 코드 독해의 원천이다. 자신이 구현하는 코드의 동작 .. Self Study/모던 자바스크립트 (Deep Dive) 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.

• 

  [마우스 hover 이용한 효과 #2. 스타일시트 작성] - 스타일 시트 작성 - .box{ max-width: 2000px; // 전체적인 큰틀 의 이름 . width:100%; margin:0 auto; } ul{font-size: 0;}// ul 안의 비어있는 간격을 없앰 ul>li{ display: inline-block;// vertical-align: top;//인라인 블럭의 요소를 세로정렬 width:33%;// 사진의 느낌을 주기 위해 33.3% } ul>li>a { display: block; width: auto;// 사이즈가 유동적으로 변하게 text-decoration: none;// 링크 형태의 텍스트에 밑줄값을 없애줌 margin: 10px ; /* 사진 사이의 띄어놓는 값들 */ } ul>li> a .screen { position:.. Self Study/응용 2022. 5. 1.

• 

  [프론트 엔드 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.

• 

  [마우스 hover 을 이용한 효과 #1. html 뼈대 만들기] 목표 1. 세개의 다른 이미지 2. 사진 갤러리 처럼 옆으로 나란히 보여지게 3. 한개의 사진에 마우스를 올리면 텍스트가 나타나는 방식으로 4. 위 -> 아래로 내려오는 텍스트 1개 5. 아래 -> 위 올라오는 텍스트 1개 그렇게 해서 1개의 div 값에 총 2개의 class 가 넣어져 있어야 함 구역 나누기 1. 전체를 하나의 div 의 값으로 지정을 해준다 . 로 지정해 주었다. 2 . class box 안에 순서를 나타내는 의 값 그 안에 값을 넣어 주었다. 3. 태그 안에 를 넣어주고 한개의 이미지 안에 들어갈 텍스트를 전체로 생각하고 그 전체를 구역이라 생각한다. 그러면 1개의 사진에 나오는 전체 텍스트 div 값의 이름을 이라고 지정 4. 이제 이 screen 의 클래스 안에 상세 텍스트의 구.. Self Study/응용 2022. 4. 26.