본문 바로가기

분류 전체보기226

[15] background-clip background-clipbackground-clip: border-box는 테두리까지 확장됨. -> 이게 기본background-clip: padding-box는 테두리에는 확장 안되어 있음background-clip: content-box는 내용부분만 확장이 됨 실습 background-clip: border-box (this is default): The background extends behind the border. background-clip: padding-box: The background extends to the inside edge of the border. background-clip: content-box: .. 2024. 11. 22.
[14] animation CSS animation CSS- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다.- css 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키프레임 keyframes을 지정해야 한다.- 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다. 실습 2024. 11. 22.
[13] Transform Transform   실습  실습Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. 실습 2024. 11. 22.
[w/퍼실리테이터 이대희 강의] TO-DO LIST 만들기, HTML/Javascript/CSS 관련 강의 -2 To-do list 만들기 CURSOR AI 사용하면 개발에 도움된다고 함.https://www.cursor.com CursorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com vscode에는 code faster with ai기능이 있어서 개발하면서 모르는 태그를 클릭하면 사이트로 연결돼서 공부를 할 수 있다. flex는 유동적으로 움직이게 해줌. 화면이 줄어들면 flex 내부에 있는게 줄어들었다가 늘었다가 해줄 수 있음맥북 기준 '개발자모드 단축키' option + command + i개발자 모드에서 직접 스타일을 바꿀 수 있다.   공부 사이트 추천https://www.w.. 2024. 11. 22.
[w/퍼실리테이터 이대희 강의] TO-DO LIST 만들기, HTML/Javascript/CSS 관련 강의 -1 강의 내용TO-DO LIST 만들기 강의그 외 HTML/Javascript/CSS 관련 강의 html은 뼈대, css는 외모,옷이라고 볼 수 있고 js는 뇌,신경,근육이라고 볼 수 있다.js는 사무적인거나 이벤트를 캐치한다는 등 기능적인 부분에서 한다.이 세가지가 들어가면 웹페이지답게 만들어진다. 1. 기본 태그: h태그는 1~6이 있고, p는 간단한 글이 들어가고, a는 어디로 이동할지, 위치 설정3. HTML5: HTML을 공부하면 주로 HTML5을 공부한다고 생각하면됨. HTML5 기준으로는 주로 시맨틱 태그가 있다.4. HTML 유효성 검사: lighthouse가 주로 많이 사용함. 보통 한가지만 알면 된다고 함. css는 스타일 부분을 채워준다.  레이아웃을 잡는 display속성에는 flexb.. 2024. 11. 22.
[Youtube clone 개인 프로젝트] 코드 리뷰 # 24.11.19 youtube clone review1. div 남용 주의 (그렇다고해서 너무 아끼는것은 안됨. 가장 어렵지만 적정선을 지킬것)2. 태그는 문장의 단락을 구분짓기위한 용도로, 단순히 화면에 선을 긋기위한 용도라면 차라리 div에 border-bottom을 넣어주자.3. 반응형 디자인을 위해 px 단위보다는, rem 또는 em 단위사용 추천.4. 전역적으로 body의 font-size를 10px(or 16.5%)로 설정하면 rem으로 다루기 편하다.5. 버튼을 의미하는 글자가 적혀있는 등 장식을 위한 요소로 삽입되는 이미지라면 CSS의 background 또는 가상요소를 활용해보자.6. 무언가가 연관이있는 목록이 있는 컨텐츠는 ul&li 요소의 사용을 고려해보자. (무분별한 div c.. 2024. 11. 20.

티스토리툴바