꽃춘의 T스토리

오전현재 TransForm 배우는중 요소가 부드럽게 변하는 효과 주기sitemenu체크박스 만든후에밑에다가 block 속성의 span 태그 3개 만듬 여기서 오른쪽 위 막대3개를 클릭하면 wrapper의 background 색이 바뀐다.visibility : hidden ; 은 말 그대로 요소를 숨기는 것 뿐이기 때문에display: none ; 과 다르게 공간을 여전히 확보중이기 때문에 레이아웃에 영향을 미치고 있는 상태이다.Transform3Dperspective : 뷰어와 요소와의 거리transform-style : 요소의 표현 방식 a{text-decoration: none; color:black;} .top-header>ul{ display: flex; ..

오전display : flex박스안의 요소들을 가로로 배치하는 속성.여기에 보통 같이 많이 사용하는게justify-content : 축 수평방향 정렬flex-start : flex 방향 시작점 기준 (기본값)flex-end : flex 방향 끝점 기준center : 중앙 정렬space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)align-items : 축 수직 방향 정렬stretch : 수직 방향에 최대한 늘려서 (기본값)flex-start : 수직 방향에 위쪽flex-end : 수직 방향에 아래쪽center : 수직 방향 가운데baseline : 컨테이너의 기준선에 배치flex-wrap자식 요소들..

오전체크박스체크박스를 만들어주는 속성이메일 수신 동의//id를 지정해서 속성을 주도록 자주 사용한다.css style 에서 선택자input[type=’checkbox’]{}a 태그a:hover{ //a태그에 마우스 커서를 갔다 댔을 때a:active{ //a태그를 클릭(active)했을 때a:visited{ //a태그를 한번이라도 사용(클릭)하고 났을 경우.position **(중요)position : box의 위치를 지정할 때 사용하는 속성static(Default) :box요소가 문서 흐름에 따라 배치(순차적)relative :box요소가 문서 흐름에 따라 배치(순차적)요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.absolute :상위 box요소롤 기준으로 위치 지정가능..

#CSShtml 파일에서 css 파일 불러오기 : //common.css 파일을 불러옴 오후font-sizefont-size 도 크기 단위를 사용한다.px : 고정 크기 지정em : 부모 태그 폰트사이즈 지정 되어있고부모 요소를 기준으로 크기 측정. 부모 font size 가 16이라면 2em 은 32.rem : 기본글자크기(root)(16px) 을 기준으로 크기 측정. 기본크기가 16이라면 2rem은 32% : 상위태그를 기준으로 측정. 상위태그가 32px이라면 50%는 16pxa태그는 부모 속성 영향을 안받음(그래서 따로 지정해줘야됨)font-weight : 글자 굵기text-decoration : 글자 밑줄 , 없애기 등font-family : 글꼴 지정.사용하는 글꼴, 글꼴 사용할 수 없을때 ..

video 태그 : html에서 video 파일을 재생시켜 준다.autoplay : 자동재생 (실행하지 않아도 자동으로 재생이 된다.)muted : 음소거loop: 무한재생 / 자동재생 , 음소거 , 무한재생  유튜브에서도 iframe을 사용해서 동영상 재생창을 화면에 띄운다.유튜브 자동재생 api : iframe body::-webkit-scrollbar{ display: none; / 크롬 웹의 스크롤바를 없앰.  .bg-video{ width :100vw; height : 100vh; position: fixed; left:0; top: 0; ..

HTML 이란?HTML 은Hyper Text Markup Language 약어로HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.시멘틱 마크업 : 기본 뼈대,구조가 되는 코드문법 DTD : 도큐먼트 타입, 선언하지 않을 경우 비표준모드로 렌더링 되어서다른 브라우저에서 접속한다거나 하는 경우에 레이아웃이 깨져서 보이게 된다 . VS CODE EXTENSION : LIVE SERVER , PRITTER ( 추천 확장팩)10시HTML 기본 구조에 대해 배우는중. VS..

오전피그마 사용법헤더 : 웹사이트의 가장 윗부분 (메뉴 창 같은 부분들을 말함!) 10시피그마 반응형 웹사이트(?) 만드는 중가로 슬라이드 만드는법하단 메뉴바 만드는법컴퓨터마다 피그마 ui가 달라서 초반에 좀 고역이었다;; (꾸역꾸역 맞춰가긴 했다만..)다행히 선생님이 잠시 후에 버전을 전부 다 맞춰서 수업해줬다 다행..그리고 프로토타입을 만들었는데, 프레임 생성 후 사각형을 안에 넣고 컴포넌트화 시켜서 다른 사각형과 연결해준다. 그러면 커서를 가져다 댔을 때 밑에 하위메뉴가 나오게 하거나화살표를 눌렀을 때 리스트가 이동하는 등 다양한 효과를 줄 수 있다. 피그마 플러그인 METERIAL DESIGN ICONS : 무료 아이콘UNSPLASH : 이미지 무료로 가져와서 쓸 수 있음 와이어프레임 :아티스트와..

개발자 환경 구축 평가 시험 날sqld 공부 및 전날 국비수업 복습 유스케이스 , 깃허브 프로젝트 생성 및 issue 생성 법 프런트엔드UI 와 UX 의 차이간단히 얘기하자면, UI는 시각적인 부분에 바탕을 둔 사용자 인터페이스이고 UX는 사용자가 경험하게 될 기능적인 부분이나 전체적인 구성 같은것들 얘기한다. 예를 들어 배달의민족이라는 어플리케이션을 보았을 때 UI는 우리가 클릭하는 버튼 , 어플을 켰을 때 보이는 화면의 디자인,검색 창의 모양 등 우리가 눈으로 보는 디자인을 생각하면 된다. UX는 배달 , 포장을 하는 기능이라던가 검색 기능 등의 우리가 앱을 실행하면서 경험하게 될 기능적인 디자인부분 , 그런 어플리케이션의 구조적인 디자인을 우리는 UX라고 정의한다. 만약에 내가 정말 마지막까지 프런..

오늘 첫시간에는 Github 충돌방지에 대해서 배웠다. (저번에 배운거 복습하는거 같은데?)깃허브 mergemerge란 , 개발자들이 같이 협업하는 과정에서 각자의 브랜치를 만들어서 개발을 할 때 각자의 일이 끝나고 결국에는 main 브랜치에서 소스코드를 합쳐서 테스트도 해보고 시스템에 적용을 해야한다.이 때 , 각 브랜치를 합치는 것 (병합) 을 merge라고 함.merge에는 두가지 상황이 존재서로 다른 파일을 수정했을 때서로 같은 파일을 수정했을 때1번 상황의 경우에는 문제가 될만한 것이 없다.2명의 개발자가 A파일과 B파일을 각자 수정했다면 merge를 할 때 충돌할 것이 없으니 자동으로 소스코드가 합쳐질 것이다.문제가 되는건 2번의 경우. 2번의 경우에는,서로 같은 이름 파일 수정, 수정한 부분..

오늘은 첫번째 국비과정 내부평가 있는 날.   철저하게 준비했다 ! 라고는 말 못하겠다...그래도 뭐 내준 것들은 안틀릴 정도라고 스스로에게 확신을 갖고 있었는데 막상 제출하고 보니까 허점 투성이더라 . 다시 또 스스로를 의심하고 돌아보게 되는 계기가 되었다. 앞으로 고쳐야 할 점:수업 들으면서 멍때리지 않기. (진도가 빨라서 조금이라도 한눈팔면 순식간에 진도가 벌어져서 못따라잡아버림)듣는 도중에도 계속 Notion 이든 메모장이든 어디에라도 적으면서 수업듣기.선생님이 써주는 거 완전히 따라적는게 아니라 내가 나중에 보고 알아듣고 다시 정리해서 적을 수 있게 간단하고한번에 보면 알아볼 수 있게 써놓기. (다 쓰려고 하면 너무 빨라서 쓰다가 놓쳐버림)너무 스스로를 다른사람과 비교하며 몰아세우지 않기 (공부..