본문 바로가기

기록

javascript_3
javascript_3 2024. 7. 17. 이전에는 onclick 형식으로 body 태그 안 태그 속에 직접적으로 입력하였다. 이렇게 진행하게 되면 태그 자체가 길어지게 되어 현재에는 script에 작성하여 스크립트를 넣어준다..addEventListener 을 사용하기 이전에는 .onclick=function(){ 적용시킬 스타일, 속성 }인터프린트 방식이기 때문에not a number대입 연산자  body>    div id="container">        button type="button" class="btn">-button>        span class="txt">0span>        button type="button" class="btn">+button>    div>body>구조    style>        button..
Javascript_2
Javascript_2 2024. 7. 16. 문자형 데이터는 데이터에 번호를 부여하는데 이를 인덱스 번호라고 한다. 인덱스 번호는 0부터 시작한다. str 속 문자형데이터에 부여되어 있는 숫자에 해당하는 문자를 찾아준다.str속 객체의 갯수, 길이를 출력할때 사용하는 속성으로  Javascript는 10글자 이기 때문에 10으로 출력이 되어진다.letvar는 완전한 메서드는 아니인데 혹 앞에서 num이라는 이름을 사용하고 뒤에서 재사용해도 이를 찾아내지 못한다 이를 보안하기 위해 나온 메서드가 let이다. num이라는 변수를 선언하고 num에 30을 넣는 방식은 같지만 혹 이름을 같이 선언하게 되면 이를 찾아 오류표시를 보여주어서 변수값에 오류가 없도록 돕는다. 즉 변수의 재선언(변수명을 다시 사용)은 불가능하지만 재할당(값을 바꿈)은 가능하다.C..
javascript_1
javascript_1 2024. 7. 15. 사용자가 어떤 행동을 했을때 반응이 나오도록 하는것이 자바스크립트 기본적으로 네비 등 다양한 움직임을 만들어낸다. 1. 자바스크립트는 인터프린터 언어이다. - 코드가 작성된 순서대로 윗줄부터 순차대로 구문분석을 한다. 그렇기 때문에 어떤식으로 진행되는지를 생각하며 만들어야 한다. 그렇지 않으면 움직임이 이상해질 수 있다.2. 자바스크립트는 클라이언트 스크립트 언어이다.- 이는 서버가 아닌 사용자의 컴퓨터 내에서 실행되는 것이기 때문에 서버의 부담감을 줄일수 있다.3. 객체 기반 언어이다.- 다양한 객체가 존재하며, 그에 해당하는 다양한 기능(메서드)들이 존재한다.4. 공개된 언어이다.- 완성된 스크립트는 외부로 분리할 수는 있으나 완벽히 숨길 수는 없다.5. 다양한 라이브러리를 활용할 수 있다.- 대표적..
반응형
반응형 2024. 7. 4. VIEWPORT기본적으로 html에 들어가는 요소이고 content의 넓이를 디바이스의 넓이에 맞춘다고 이야기 해주는것이다. 이것의 크기 비율은 1.0으로 기본적인 요소이다.확대 할떄의 크기를 설정하는것으로 최대 5까지 가능하다 해당 코드는 확대하지 않는다는 의미이다. 그리고 최소 축소 크기도 지정할 수 있는데 해당 코드는 축소하지 않겠다는 뜻으로 늘리거나 줄이지 않겟다는 의미가 된다. 이상태에선 hover는 되지 않는다 스마트폰 모드이기 때문에줄이는건 괜찮지만 늘리는건 늘어나지 않는데 이는 이미지의 크기를 넘어가서 이다. max-wieht 가 이런 성질을 가지고 있다.반응형 작업을 할때는 초기화 작업으로 꼭 img에 max-width를 설정해야하고 본래 작업할때도 이미지를 커다랗게 만들어서 잘리거나 부..
Grid
Grid 2024. 7. 2. Grid        .container{            border: 10px dashed #ccc;            width: 600px; height: 600px;            margin: 50px auto;            /* display: grid; */        }        .item{            border: 5px solid orangered;            padding: 20px;            font-size: 20px;            display: flex;            justify-content: center;            align-items: center;        } 그리드를 지정하지 않고 아이..
hover, 웹 폰트 아이콘 적용법, form 태그
hover, 웹 폰트 아이콘 적용법, form 태그 2024. 6. 20. hover 스타일 속성은 마우스 커서를 가져다댓을때 변하도록 적용되는 속성으로 어떤 태그나 클래스에 커서가 갔을때 적용되도록 설정한다. hover를 적용하는 위치도 중요한데 경로와 위치를 잘 설정해주어야 한다. ex : .list:hover .txt{} - list 클래스를 선택시 변화되어 txt가 보인다.       .list a:hover{ color : #fff } - a 태그에 커서를 대면 설정한 속성(color -#fff)으로 변화한다. 아이콘을 적용하는 방법 1. svg로 저장(이미지 : 수정시 피그마나 따로 변경 프로그램으로 해야함, html code : 색상변경등 유동적이다.)하여서 가져오기 - 용량이 작고 어떤 디바이스든 형태가 잘 유지된다. 2. web font (font는 기본적으로 ..
position_sticky
position_sticky 2024. 6. 19. - position_stickyvh 단위는 viewport를 의미하는데 브라우저에서 보이는 크기정도를 말하는것이다.style>        *{margin: 0; padding: 0;        box-sizing: border-box;}        .sec{height: 100vh;}        .sec1{background: beige;}        .sec2{background: pink;}    style>head>body>    section class="sec sec1">        div class="box static">div>        div class="box absolute">div>        div class="box fixed">div>        div clas..
position 활용
position 활용 2024. 6. 18. style>        .ex{            width: 600px;            border: 5px solid #333;            margin: 100px;        }        .box{            width: 400px;            padding: 50px;            background: #eaeaea;            border-top: 3px solid hotpink ;        }    style>기본적으로 내용을 입력하게 되면 왼쪽 상단이 디폴트 값이기 때문에 위와 같이 나온다. 디자인상으로 텍스트 박스를 중앙 위로 올리고 싶을때 사용하는것이 position : relative이다. 해당 위치에서 옮길거기 때문에 딱히 ..
사이트 제작_html, position 속성
사이트 제작_html, position 속성 2024. 6. 17. 코딩을 하는데 있어서 중요한 순서  1. html 구조 작성 2. 스타일 시트(CSS)를 작성 - 사이트 작업시에느 외부스타일로 작성하고 따로 폴더를 만들어서 작업해야한다.3. images 폴더 같은 폴더에 있지 않으면 경로에 문제가 생기기 때문에 이미지가 로딩되지 않는 경우가 있기 때문에 항상 같은 같은 폴더에 이미지 css 등 따로 폴더를 만들어서 진행해야한다. - 브랜드 페이지 제작html을 작성하는데 있어서 기본적으로 들어가는 레이아웃을 먼저 잡아주고 시작하는것이 기본이다.헤더가 여러가지 컨텐츠가 들어가 있을 경우 행을 나눠 진행한다. (위는 로고가 있는 1행과 네비가 있는 2행으로 나뉜다.) 또한 기본적으로 코딩은 왼쪽에서 시작해서 가는것이 기본이지만 접근성에 따라서 읽어야 하는 중요도에 따라서..
플랙서블 박스
플랙서블 박스 2024. 6. 13. 5번은 마진 레프트 라이트가 각각 들어가는거고 (설정한 값만큼)6번은 각각 컨텐츠의 여백을 똑같이 주는거다(공간에 따른) 5,6번이 비슷해보이지만 차이가 있다.플랙스의 기본 값으로 자손은 부모의 값을 따라가게 된다.5번은 글자 크기를 기준으로 하여 위치를 맞추는 것이다.순서변경 flex-basis : 부모의 크기를 줄어들때 자손의 크기를 어떻게 할지 정하는것것기본 크기는 항상 200으로 하겟다는 뜻 기본값을 지정하는것이다.                padding: 20px;                background: tomato;                color: #fff;                border: 1px solid #2a0c0c;                width: 20..

티스토리툴바