티스토리

마코's 개발일지

검색하기

블로그 홈

마코's 개발일지

marketingcoding.tistory.com/m

마코s 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

background 속성 내 center값 관련 *background 속성 안에 기입되는 속성값 중 center의 의미 : - 첫번째 center는 x축을 기준으로 가운데 정렬 - 두번째 center는 y축을 기준으로 가운데 정렬 if, 만약 100px, 100px이렇게 입력한다면, x축으로부터 100px 떨어진 곳, y축으로부터 100px떨어진 곳부터 이미지를 노출하겠다는 의미! 공감수 0 댓글수 0 2023. 3. 25.
test 공감수 0 댓글수 0 2023. 3. 10.
display 속성을 inline 혹은 inline-block 으로 변경할 때, 발생하는 Margin에 대하여 1.상황 : - 세로로 나열되어 있는 요소들을 가로로 배열하기 위해서 display 속성을 inline 혹은 inline-block으로 변경해야 하는 경우가 발생! 2.문제점 : - 가로로 변경은 되었으나, 2줄로 변경! - 그 이유는 display의 속성값이 변경되면서 각각의 요소들 사이에 기본적인 margin 값이 들어가서 입니다. 3.해결방법 : - margin-right 값을 해당 요소들 개수만큼 - (*음수) 처리해주기! *참고사이트 : https://www.codingfactory.net/10814 CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법 inline 또는 inline-block의 여백 display 속성값으로 inline .. 공감수 0 댓글수 0 2023. 3. 4.
CSS에서 calc( ) 함수에 대하여 calc( ) 함수는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수 *참고사이트 https://www.codingfactory.net/10373 CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수 개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, - www.codingfactory.net 공감수 0 댓글수 0 2023. 3. 2.
스타일 시트 CSS접두어 -webkit의 의미 *CSS 속성 중 접두어를 붙어야 하는 경우 있음. 각 접두어 의미 : 참고사이트 :https://mainia.tistory.com/3671 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 웹에서 CSS 를 적용할 때 webkit, moz, ms, o 접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기 때문입니다. 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스, mainia.tistory.com 공감수 0 댓글수 0 2023. 3. 2.
backdrop-filter 1.backdrop-filter 정의 : - 요소 뒤에 흐릿하게 흐림효과를 주거나, 다양한 색상 필터링 효과를 줄 때 사용 가능 - blur(n px) : n숫자가 커질수록 흐림효과가 커짐 https://homzzang.com/b/css-259 홈짱닷컴 홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL homzzang.com 공감수 0 댓글수 0 2023. 3. 2.
display : inline-flex 에 대하여 정의 : - 부모 요소인 컨테이너에 사용하는 스타일 속성 부모요소가 inline-flex속성이 된다면, 자식 요소에도 inline-flex요소가 적용이 된다. 참고사이트 : https://rgy0409.tistory.com/4813 CSS display: flex 그리고 inline-flex 인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정 rgy0409.tistory.com 공감수 0 댓글수 0 2023. 3. 2.
SVG 이미지 파일에 대하여 1.SVG 이미지 파일이란? - Scalable Vector Graphics : 웹 친화적인 벡터 파일 포맷 이미지 - jpeg와 같은 픽셀 기반의 래스터 파일과 달리 점과 선으로 만들어진 수학공식의 이미지 저장 방식 관련 참고 자료 : https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html SVG 파일 알아보기 | Adobe SVG 파일은 크기를 조정해도 해상도가 저하되지 않으므로 온라인 그래픽에 매우 적합합니다. SVG 파일의 특징과 장단점에 대해 자세히 알아보세요. www.adobe.com 공감수 0 댓글수 0 2023. 3. 2.
display : grid에 대하여 1.Grid와 Flex의 큰 차이점 : - Grid는 두 방향 (가로 / 세로) 레이아웃 시스템 (2차원) - Flex는 한 방향 레이아웃 시스템 (1차원) 2.Flex와 비슷한 점 : - 부모요소를 Grid Container(*그리드 컨테이너)라고 부르고, 자식요소를 Grid Item(*그리드 아이템)이라고 부릅니다. - Flex와 마찬가지로 Grid는 컨테이너에 display:grid;를 설정하는 것으로부터 시작! 3.전반적인 정리 : 4.그리드 형재 정의 : - grid-template-rows - grid-template-columns 원본 출처 및 참고사이트 : https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용.. 공감수 0 댓글수 0 2023. 3. 2.
CSS : root (가상선택자) 를 통해 css 변수 선언하기! 일반적으로 CSS문서에서 사이트를 구축할 때, 다양한 CSS파일이 사용됩니다. 그래서 CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업 가능합니다!! 1. :root 의사 클래스 :root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 이므로, :root와 html은 같습니다. 2. CSS 변수사용 :root 내 변수를 지정할 때에는 변수 맨 앞에 "--"를 반드시 붙여주어야 합니다. 공감수 0 댓글수 0 2023. 3. 1.
display에서 inherit의 역할 display에서 속성을 inherit으로 지정할 경우, 부모요소의 display 속성을 그대로 따르게 됩니다. 참고사이트 : https://dev.epiloum.net/834 CSS display 속성을 이해하기 위한 6가지 포인트 – Epiloum 개발노트 CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하다보면 잘 알려지지 않은 특징들을 만나게 되는 dev.epiloum.net 공감수 0 댓글수 0 2023. 3. 1.
CSS에서 all 속성에 대하여 all속성은 html 에서 기본적으로 가지고 있던 태그의 속성을 reset시키고 처음부터 직접 스타일을 다시 주고 싶은 경우, 사용! 참고사이트 : https://velog.io/@cecy-coding/HTML-CSS-%EC%9A%94%EC%86%8C%EC%9D%98-%EB%AA%A8%EB%93%A0-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%B4%88%EA%B8%B0%ED%99%94-%EC%8B%9C%EC%BC%9C%EC%A3%BC%EB%8A%94-all-%EC%86%8D%EC%84%B1 [HTML / CSS] 요소의 모든 속성을 초기화 시켜주는 all 속성 css 스타일 속성 중 unset이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼.. 공감수 0 댓글수 0 2023. 3. 1.
clip-path generator 사이트 clip-path 사이트 https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com clip-path 좌표순서에 따른 의미 좌상 / 우상 / 우하 / 좌하 => 시계방향 순 공감수 0 댓글수 0 2023. 3. 1.
flex 박스에 대하여 1.flex박스를 사용하기 위해서는 우선 container와 items의 요소를 인식해야 한다. - container : items를 감싸는 부모요소 - items : container의 영향을 받는 자녀요소 - container에 적용할 수 있는 속성과 items에 적용할 수 있는 속성이 서로 다르다. 2.그리고 flex박스의 가장 중요한 요소는 바로 direction(방향) 이다. - flex-direction : row => display : flex 의 경우, 기본값이 row이며, 왼쪽에서 오른쪽으로 표시하는 것을 의미. - flex-direction : column => 위에서 아래로 표시하는 것을 의미. 3.flex-direction에 따라서 "주축"과 "교차축"이 나눠진다. - 만약 flex.. 공감수 0 댓글수 0 2023. 2. 23.
float: left 속성 활용 중 가운데 정렬하기 1.float: left 속성을 display: inline-block으로 변경 2.부모요소에 text-align: center로 변경 공감수 0 댓글수 0 2023. 2. 23.
jQuery PC 및 Mobile 버전 체크 1.PC 버전 : https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com download > Using jQuery with a CDN > https://code.jquery.com jQuery CDN The integrity and cro.. 공감수 0 댓글수 0 2023. 2. 12.
counter-increment 속성 1.counter-increment : 숫자를 생성하면서 자동으로 번호를 매겨주는 속성!! - 항상 content : counter(카운터이름)과 함께 다닌다. 공감수 0 댓글수 0 2023. 2. 12.
객체심화 (for in 문 / 축약표현) 1.for in : 객체구조에서 반복문을 사용하고 싶은 경우 2.객체축약 표현 : 아래와 같이 가능! 위, 아래 모두 동일한 화면구성 표현! 공감수 1 댓글수 2 2023. 1. 25.
문자열 메소드 학습하기 1.입력한 문자열을 모두 대문자로 표현하는 메소드 : toUpperCase() 2.입력한 문자열을 모두 소문자로 표현하는 메소드 : toLowerCase() 3.입력한 문자열의 공백을 없애주는 메소드 : trim() - 앞쪽에 있는 공백만 없애주고 싶을 때 사용하는 메소드 : trimStart() - 뒤쪽에 있는 공백만 없애주고 싶을 때 사용하는 메소드 : trimEnd() 4.기존의 문자열을 가공해서 새로운 문자열을 생성할 때 사용하는 메소드 : repeat(3) (*지정한 문자열을 인자로 전달한 횟수만큼 반복해서 반환해준다.) 5.지정한 문자열을 지정한 길이만큼 늘려주고 싶을 때 사용하는 메소드 : padStart(10, '_') - 앞쪽에 지정한 문자열을 늘려주고 싶을 때 : padStart() -.. 공감수 0 댓글수 0 2023. 1. 25.
반복문 (for of, while, do while) 1.for of : for of문은 어떤 조건을 만족할 때에만 반복하는 것이 아니라, 뒤에있는 배열의 요소들을 처음부터 끝까지 순회하면서 내부에 지정된 코드를 실행하는 방식으로 동작함 2.while : while문은 괄호안에 조건이 참인지 먼저 확인 => 참이라면, 내부 코드 실행 3.do while : do while문은 괄호안의 조건을 나중에 제시 따라서 우선 i 변수값을 우선 먼저 표기 후 조건문을 실행한다. 공감수 0 댓글수 0 2023. 1. 25.
for문 사용 시, 초기값 및 증감문을 밖으로 뺄 때 작성법 원래는 for문 안에 초기값; 조건식; 증감문 이렇게 3개가 들어가야 하지만, 초기값의 경우, 밖으로 빼서 정의할 수 있음. 이때, 유의사항 => 반드시 for문 안에 세미콜론(;)이 표기되어야 한다! 공감수 0 댓글수 0 2023. 1. 24.
IF문 작성 시, 괄호 생략관련 1.IF문 작성 시, 실행부가 한 줄로 끝나는 경우 1) 중괄호 없이 생략 가능 2) 아예 조건을 작성한 괄호 옆에다가 작성할 수도 있음 공감수 0 댓글수 0 2023. 1. 24.
CSS에서 em과 rem 의 의미 1.em이란? : - element의 약자, px, pt와 달리 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 상대 단위! 2.사용방법 : - em, rem 모두 CSS의 font-size 속성값에 따라 결정된다. 예를 들어 font-size가 16px인 경우, 1em = 16px 2em = 32px 3em = 48px 3.em과 rem의 차이점 : - em은 해당 단위가 사용되고 있는 요소의 font-size - rem은 root, 즉 최상위 요소 요소의 font-size 속성 값이 기준이 됨. *참고사이트 https://www.daleseo.com/css-em-rem/ 공감수 0 댓글수 0 2023. 1. 24.
border-box vs content-box 차이점 CSS box-sizing 속성 차이점 1.content-box : - 지정한 CSS width 및 height를 컨텐츠 영역에만 적용 2.border-box : - 지정한 CSS width 및 height를 전체 영역에 적용 *참고사이트 https://dasima.xyz/css-box-sizing-content-box-vs-border-box/ 공감수 0 댓글수 0 2023. 1. 24.
vh vw 그리고 %와 차이점 1.정의 : 현재 실행중인 스크린 크기에 맞춰 상대적 크기 반환 - vh : viewport height - vw : view width > 100vh, 100vw가 전체 화면의 기준이 됨. > 예를 들어, height 1000px / width 800px 이라고 가정 시, 1vh = 10px / 1vw = 8px 이 됨. > height: 50vh = 500px / width: 25vw = 200px 2.%와 차이점 - vh와 vw는 열려있는 화면 전체의 상대길이를 의미 = 스크롤바를 포함한 길이 반환 - %는 창이 중심이 아닌, %를 사용하고 있는 요소의 부모 요소의 길이에 맞게 반환 *참고사이트 https://programming119.tistory.com/93 공감수 0 댓글수 0 2023. 1. 24.
플렉서블 박스 flexible box 레이아웃 1.플렉서블 박스 = 플렉스(flex) 박스라고도 부른다. 2.CSS3에서 처음 소개된 레이아웃 모델 3.주요개념 - flex-direction : 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향 설정 1) row : 기본설정 / 왼쪽에서 오른쪽으로 2) row-reverse : row의 반대 / 오른쪽에서 왼쪽으로 3) column : 위쪽에서 아래쪽으로 4) column-reverse : column의 반대 / 아래쪽에서 위쪽으로 - justify-content : 플렉스 요소의 수평 방향 정렬 방식 설정 - align-items : 플렉스 요소의 수직 방향 정렬 방식 설정 - flex-wrap : 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소 위치를 다음 줄로 넘길지 여부 결정 *참.. 공감수 0 댓글수 0 2023. 1. 24.
36강 addEventListener [36강 addEventListener] 1.EventListener : onkeydown 과 같은 이벤트 속성들을 직접 지정할 수 있도록하는 기능 공감수 0 댓글수 0 2023. 1. 24.
35강 appendChild [35강 appendChild] 1.appendChild 메서드 : 특정 요소의 하위에 어떤 속성을 추가하고자 할 때, 사용 공감수 0 댓글수 0 2023. 1. 24.
34강 JS로 HTML 태그 생성 [34강 JS로 HTML 태그 생성] 1.자바스크립트에서 태그를 생성하는 메서드 : document.createElement( 작성하고싶은 태그 입력 ) 공감수 0 댓글수 0 2023. 1. 24.
33강 키보드 event 체크 [33강 키보드 event 체크] 1.onkeydown 속성 : 해당하는 태그 영역 내에서 키보드 버튼이 눌렸을 때, 동작하게 된다. 2.window( ) : 전역객체 => 최상위, 가장 높은 공간에서 존재하고 있는 객체 3.event : 현재 페이지에서 벌어지고 있는 어떠한 이벤트를 체크해줄 수 있는 속성 - window.event => event는 굳이 앞에 window를 꼭 붙여줄 필요가 없다. 공감수 0 댓글수 0 2023. 1. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.