프론트엔드 지망생

- 14일차 프론트엔드 공부 -케스케이딩 (Cascading)수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 1.중요도CSS가 선언된 위치에 따라 우선순위가 결정된다. 브라우저 스타일 시트   브라우저 스타일 시트  사용자 스타일 시트-사용자 폰트 지정- 고대비 모드 사용- 사용자가 본인의 취향, 편의를 위해 사용하는 것 개발자 스타일 시트- 개발자가 만들어 놓은 선언개발자 스타일 시트로 연결한 css 파일 요소 안에 있는 css  중요도 정리인라인 스타일 css 요소 안에 있는 css 로 연결한 css 파일사용자 스타일 시트브라우저 스타일 시트  2.구체성(명시도)선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아..

- 13일차 프론트엔드 공부 -CSS 상속부모 요소의 속성값을 자식 요소에게 상속한다.하지만 상속되지 않은 속성들도 존재한다 상속되는 속성 colorfont-familyfont-size 상속되지 않는 속성paddingmarginborder  안녕하세요. 처음 뵙겠습니다. 저는 프망생입니다.  * { box-sizing: border-box;}.container { color: blue; font-size: 40px; border: 4px solid orange;}.inner_box { color: red;}    웹폰트 HTML 요소의 글씨체를 바꾸고 싶다면?font-familyfont-family: “폰..

- 12일차 프론트엔드 공부 -가상 클래스 선택자 :first-of-type :first-child형제 요소 중 첫번째 요소를 선택하는 가상 클래스 :first-of-type형제 요소 중 첫번째 요소를 선택하는 가상 클래스 하지만 :first-child와 다르게 :first-of-type 이라는 가상 클래스가 적용된 선택자에 해당 되는 요소만 카운트한다 :last-of-type :nth-of-type(n)  제목입니다. 첫번째 p입니다. 두번째 p입니다. 첫번째 span입니다. 세번째 p입니다.  * { box-sizing: border-box;}.container span:first-child { background-..

- 10일차 프론트엔드 공부 -  HAGD 어제의 일기 오늘의 일기 내일의 일기 ..

- 11일차 프론트엔드 공부 - 레이아웃CSS 레이아웃이란 CSS를 이용해서 단순한 문서 형태의 HTML을 보기 좋게 배치하고 재배열 하는 것. 관련 기능,완성된 배열 등을 포괄적으로 지칭한다. 선택자 전체 선택자*{ property : property value } 그룹 선택자  .class1, .class2 { property : property value } 가상 클래스 선택자실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.선택자:가상 클래스 {property : property value }:first-child:class:first-child {property : property value } :last-child:class:last-child {prope..

- 10일차 프론트엔드 공부 -  나만의 일기장 나만의 일기장입니다! 원하는 색과 사이즈로 일기장을 꾸며보세요. Have a Good Day!😊 프망생의 일기 ..

- 09일차 프론트엔드 공부 -   태그rel : 해당 태그로 연결 시켜줄 파일과 어떤 관계인지 지정href : 연결할 파일의 경로를 지정 선택자 (Selector) 태그 선택자 tag {property : value} ex)div { background-color : red; }id 선택자#id { property : value; }   ex)#title { font-size : 24px; } class 선택자.class { property : value;}   ex).box { border : 2px solid red;}   자손 선택자 제목부제목   ex).box1 .title {color : red;}-> box1 class 안에 있는 title class 만 선택한다 (공백 필요) 다중 선택자선..

- 08일차 프론트엔드 공부 - 회원가입 페이지를 만들어보려고 한다간단히 핸드폰 번호를 입력하고 인증번호를 생성하며 3분안에 인증을 해야한다.또한 회원가입을 위한 정보를 입력하기 전에 가입하기 버튼을 누르면 입력하지 않은 칸 밑에 텍스트를 통해 보여주고 모두 입력 시 팝업을 통해 회원가입 축하 팝업을 출력할것이다.   회원가입 - ..

- 싸이월드 실습 4 - 싸이월드 1싸이월드 2싸이월드 3간단하게 싸이월드 페이지를 완성해보았다.첫번째 페이지에서 동영상을 넣어서 재생이 가능하도록 하였다.두번째 페이지에서는 간단히 음악 앨범을 보여주는 페이지를 만들었다.세번째 페이지에는 간단한 게임이 있는데 끝말잇기 게임과 로또 번호 생성기이다.완성한 코드는 추후 Git을 통해 공유할 예정이다.

- 프론트엔드 공부 07일차 - 06일차 인증번호 생성기와 타이머를 만들어보았다. 하지만 해당 코드에서 인증번호 전송을 여러번 누르면 인증번호가 계속 생성되고 타이머는 꼬이는 오류가 생기게 되었다.이를 해결하기 위해 그때 이용한 html은 그대로 사용하고 js만 수정해보았다.let isStarted = false;const createNum = () => { if(isStarted === false){ //타이머가 작동중이지 않을때 isStarted = true document.getElementById("completebtn").disabled = false const num = String(Math.floor(Math.random..