대외활동/멋쟁이사자처럼_프론트엔드 12기37 멋사 FE 스터디 1주차_웹디자인 기능사 정리 Section2. CSS 익히기 1. css 기본문법 1. css 정의와 특징CSS(Cascading Style Sheet)는 HTML 문서가 사용자에게 표시되는 스타일이나 레이아웃 등의 디자인 서식을 작성하는 언어입니다. HTML 문서의 글자, 줄, 간격, 여백, 배경, 색상, 이미지 등에 대한 디자인을 작성할 수 있습니다. 2. CSS 기본 규칙1) css 작성하기CSS의 각 태그들은 선택자{ 속성: 속성값; 속성:속성값; ...}처럼 작성합니다. 예를 들어 span태그에 글자색을 파랑으로 주고 싶다면 span{color:blue;} 를 주고 container라는 클래스에 배경색을 검은색으로 주고 싶다면 .container{background-color: #fff;} 와 같이 사용합니다. 2) 여러개.. 2024. 5. 12. 멋사 FE 4주차. 과제-TIC-TAC-TOE 게임 만들기 https://www.youtube.com/watch?v=lYtPscvwgP4 ----default react project 만들기 1) npx create-react-app .ㄴ폴더명에 대문자를 넣었더니 작동하지 않았다. 2)npm start3) App.js의 아래 코드 삭제-----1) 타이틀 바꿔주기 2) 폴더 만들기3) rafc 스니펫 활용 4) css 만들고 연결하기----스타일, 페이지 만들기1) 페이지 만들기2) 전체 스타일3) TicTacToe.css4) board----1) jsx에서 동작(js스타일?)2)checkwin3) h1 바꿔주기4)reset 2024. 5. 12. 멋사 FE 3주차. javascript test review 변수와 배열, 연산자, 조건문이번 3주차에는 javascript와 css 시험을 봤습니다. 스스로가 이렇게까지 프론트엔드에 대해 모르고 있었나 싶어졌고 더욱 겸손한 마음을 가지게 되었습니다. 1. 변수 (variable)★초기화한 const 변수를 변경하려고 할 때 오류변수에서 가장 중요한 것은 값을 변경할 수 없는 const와 나중에 값을 변경할 수 있는 var, let으로 나누어진다는 것입니다. 예시 문제1)const a = 300;let b = 200;var c = "javascript";a += 100;b -= 500;c += "good"; 더보기출력 uncaught type error 다음과 같이 변경할 수 없는 값인 const를 변경하고자 시도하면 코드 전체에 실행 오류가 발생합니다.실제 a.. 2024. 5. 6. 멋사 FE 3주차. 웹 호스팅 서비스 NetLify로 todolist 업로드하기 1. 회원가입후 -> 로그인2. sites 클릭3. drag&drop으로 html파일이 든 폴더 upload4.기다렸다가 deploy되었는지 확인5. 완료 참고 동영상:https://www.youtube.com/watch?v=X3pjLc7BiwU 2024. 4. 30. 멋사 FE 3주차 javascript로 todolist 구현 배우기 todolist 만들때 태그 정리 1. todolist 구현을 위한 기능 adt input = 입력 main = main#main //생성되는 모든 것들 넣을 박스 Addbtn = button#addbtn i=0 //인덱스 plusbtn을 누르면(Addbtn)) div.list 생성 div.box 생성 input.checkbox{i} 생성 label.checkbox{i} 생성 p.text =input // input 텍스트 출력 button.deletebtn 생성 deletebtn으로 상위 박스 삭제 checkbox 클릭 줄그어서 p 줄그어서 없애기 box 2024. 4. 13. 멋사 FE 3주차. html,css로 position : absolute와 relative position의 대표적 속성값으로 asolute와 relative가 있습니다. 부모 요소에 position은 relative로 주면 가장 가까운 relative의 크기에 따라 absolute를 준 자식 요소가 위치합니다. .box{ width: 1250px; height: 1080px; margin:0 auto; position: relative; } .content01{ width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; } See the Pen Untitled by 장서원 (@rangishn-the-builder) on CodePen. 2024. 4. 13. 이전 1 2 3 4 5 6 7 다음
