본문 바로가기

전체 글83

[IT] 프론트엔드 개발 ㅡ 부트캠프 한달간 느낀점 ! 먼저 첫날 작성한 학습 계획표는 99% 지켜지고 있다. 학습량을 시간으로 계산하기보다는 강의가 연결되는 구간마다 잘라서 진행한 부분이 달라졌다. HTML 과 CSS는 혼자 선행학습했던 부분이라고 간과하던 나 자신 반성한다. 과제의 클론 코딩을 반복하면서 익히지 못한 코드들이 선명하게 드러났다. 그리고 HTML과 CSS를 더 깊게 파고든다면 현업에서 사용할 기술이 무궁무진하다는 것을 느꼈다. 앞으로 모르는 코드를 발견했을 때는 블로그에 기록하고 다시 한번 예제 코드로 익힐 생각이다. 마크업 개발 왜 중요할까 ? ㅡ 디자인과 기술의 오작교 때문이다. 기획 > 디자인 > 마크업 > FE / BE > QA > 릴리즈 ㅡ 웹 서비스의 규모가 클수록 디자인 복잡도 상승 한다. 고로 마크업 .. 2024. 1. 31.
[IT] HTML - hidden 속성이란 ? (css 글자수 넘어가면 말줄임표 ) ㅇ hidden ㅡ hidden 속성을 넣어주면 브라우저 상에서 숨기는 기능 ㅡ 개발자 도구로 열어보면 코드는 남아 있다. ㅡ 스크린 리더로 읽을 때에도 숨겨지게 된다. ㅇ input 태그의 hidden 속성 ㅡ 브라우저에는 보이지 않지만 결과값을 넘겨주어서 값의 정보가 확인 가능 하다. ㅇ css의 overflow: hidden 속성 ㅡ 넘쳐흐르는 부분을 숨긴다 . * display: none ㅡ 코드는 존재, 레이아웃에서 사라짐 * visbility: hidden ㅡ 문서의 레이아웃을 변경하지 않고 , 숨김 ㅡ 레이아웃에서 숨기지 않고 나옴 ( 요소의 빈 부분만 나옴) ㅡ white-space : nowrap; 속성은 줄바꿈을 방.. 2024. 1. 31.
[IT] CSS - 애니메이션의 모든 것 ! (html에서 자바스크립트 활용) 자바스크립트 ㅡ 이벤트 : 사용자가 하는 모든 행동 ㅡ 태초부터 웹 UI 를 제어하기 위한 언어였다. 작성법에는 기초적으로는 3가지 순서가 잇다. 1) js로 제어하고 싶은 html태그를 선택 2) 어떤 이벤트가 발생했을 때 제어할 것인지 선택 3) css를 변경 ㅡ . 은 ~ 의 로 해석 가능함 ㅡ 변수의 종류는 var, let, const 가 있음. ㅡ 로 자바스크립트 사용 console.log(""); 로 콘솔 화면에서 실행 가능하다. console.log("안녕하세요"); 아래에서 사용방법에 대해 상세히 알아보자 ! 1) 자바스크립트로 선택하는 HTML 태그 var 박스 = document.getElementById("box"); console.log(박스); ㅡ선택자 예제 ( querySelec.. 2024. 1. 29.
[IT] SASS - SASS의 모든 것 ! SASS란 ? 구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 ! ㅇ SASS 란 ? ㅡ CSS의 확장 언어이다 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 ) ㅡ 변수, 반복문, 가정문 등 이 있다.. ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다. ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 . ( VScode의 사스 확장형으로 사용가능함 ) ㅇ SASS에서 다루는 CSS - nesting 구조 ㅡ html 의 구조에 따라 각각의 요소로 중첩해서 적는다. (보통 2~3개 중첩함, 그 외는 클래스명 새로 지정) ㅡ 예제로 한번 알아보자 ! 1) 예제 scss 파일 bod.. 2024. 1. 29.

티스토리툴바