본문 바로가기

기록

background, gradient, display
background, gradient, display 2024. 6. 12. a:hover - a 태그에 해당 되는 스타일을 넣어주게 되면 커서를 가져다댈 경우 색이 변하도록 하는 css이다.많이 쓰이기 때문에 기억해두자부모에게 백그라운드 이미지를 주고 자손에게 마진 탑을 주게 되면 마진 자체가 흡수되어서 이미지가 같이 밀려나게 되고 그렇기 때문에 padding을 주는것이 좋다.px - 절대 단위 % - 상대 단위background-size : contain; - 가로 세로중 짧은 쪽에 크기가 맞춰진다. (주로 세로에 맞춰진다.) background-size :  cover; - 가로세로중 긴쪽에 맞춰지게 된다. 다만 짧은쪽 이미지가 잘릴수 있기 때문에 디자인 할때 조금 크게 디자인 하기도 한다. 기본적으로 이미지를 불러오면 'auto'로 지정되어 있다. (이미지 고유의 사이즈로..
border_radius, background 설정
border_radius, background 설정 2024. 6. 11. - border-radius  border-radius : 테두리를 둥글게 만드는 태그 margin과 같이 순서는 왼쪽상단부터 차례대로 시계방향으로 설정한다. 모든면을 같은 값으로 주고 싶을때는 하나만 입력하고 위아래, 왼쪽오른쪽이 같을때는 하나씩만 설정하면 된다. 원으로 만들고 싶을땐 넓이 높이를 같게 설정하고 설정값의 1/2 값만큼 작업하면 된다. (ex : width : 200px height : 200px border-redius : 100px or width : 200px height : 200px border-redius : 50%)작업하는 컨텐츠를 중앙에 배치하기 위해서는 양옆에 auto를 넣어주면 디바이스 크기에 상관없이 자동으로 중앙배치가 된다.후손 선택자 - 클래스 안에 해당되는 선택자..
list style, margin, padding, border style
list style, margin, padding, border style 2024. 6. 5. - list 태그 종류 list-style-type: lower-roman > 로마소문자 / none > 아무것도 표시하지 않음list-style-image : url(파일 로드) + inside _ 안으로 들여넣어주기 앞에 별다른 코드 없이 그냥 속성으로 사용도 가능하고 같은 태그에 사용이 가능하다 (다 블럭태그) 해당 언어를 입력하고 웹으로 확인하게 되면 박스형식으로 웹이 지정되어 있는것을 확인 할 수 있다. block 태그는 브라우저 전체 (넓이 높이를 지정하지 않는다면) inline은 해당 컨텐츠 자체의 크기를 의미한다.블럭 태그는 브라우저의 크기와 넓이에 따라 크기가 변하지만 인라인은 해당 텍스트에만 적용 되기 때문에 크기를 설정해도 인지하지 못하고 auto로 적용된다. 여기서 블럭 태그에게 ..
Web Font 적용, text 스타일 요소
Web Font 적용, text 스타일 요소 2024. 6. 4. - 웹 폰트 사용하기 https://www.w3schools.com/ W3Schools Online Web TutorialsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com html 사이트 _ 코딩 관련 사용되는 사이트 이기 때문에 자주 와서 여러가지 속성이나 코드들을 볼 수 있다.각각 폰트 파일을 지원하는 브러우저들에 대한 표이고 'woff2' 파일이 많은 브라우저를 넓게 ..
멀티미디어 태그, CSS_1
멀티미디어 태그, CSS_1 2024. 6. 3. - 멀티미디어 태그  - 동영상 태그 src 로 경로를 지정해주면 동영상이 등록되게 되는데 이때 자동재생이 되거나 하진 않고 영상을 우클릭하여 모든 제어 기능을 표시하면 재생 버튼이 만들어 진다.이전에는 읽는 확장자가 다 달라서 여러가지 확장자를 기입해 놓았다. 그중에서 해당 브라우저가 읽을 수 있는 확장자를 읽어서 내보내준다. 여기선 mp4를 먼저 읽었다. (하나의 태그 안에 여러 동영상을 넣어도 해당되는 것 하나만 적용되게 된다.) autoplay - 자동재생 (동영상에 소리가 들어가 있을 경우 재생이 되지 않는다.)muted - 자동재생을 위해서 소리를 없애는 태그loop - 동영상 반복재생 (짧은 동영상을 반복적으로 재생하여 페이지 로딩시간을 줄이기 위해서) preload - 동영상을 재생할 때 ..
html_이미지 삽입, 링크 태그
html_이미지 삽입, 링크 태그 2024. 5. 31. 이미지 삽입 태그 : 단일태그 img src="그림파일명" / alt="설명글"(화면 리더기를 사용하는 경우 접근성을 높일 수 있다.) / title="풍선도움말로 텍스트가 나옴" / width="200px" : 이미지 가로 / height="400px" : 이미지 세로./ : 같은 폴더에서 꺼내겠다 원하는 폴더 엔터 - 이미지 엔터alt 는 설명 gif 는 색상이 단순한 애니메이션 파일 title : 해당 이미지의 설명으로 이미지에 커서를 가져다 대면 설명이 나오게 된다. 이미지에 대한 경로를 제대로 설정하지 않으면 깨진 이미지로 표시 되고 지정한 이름만 뜨게 된다.width : 이미지의 가로 크기 설정 / 이때 세로는 따로 설정하지 않는 이상 가로의 크기에 맞게 설정된다.이미지 태그는 inline태그..
html_개요
html_개요 2024. 5. 30. 시작 끝(문단) 현재는 자동으로 끝이 지정되는데 그러지 않게 설정 (자동으로 설정해 놓으면 코딩내용이 길어지다보면 꼬이게 된다.)마우스 휠을 사용해 크기조절 설정폴더를 오픈한 상태에서 해야 작업이 진행된다. (라이브 서버에서 열리도록 하여서 작업 상황을 확인할 수 있도록) - HTML 문서 저장시 주의할 점파일저장시 영문만 사용 (소문자) - 서버에서 인식을 하지 못해서 오류가 발생할 수 있다.숫자로 시작하면 안된다. (ex_1test.html / 111.html - X)띄어쓰기하지 않는다. (ex_test 1.html - X / test_1.html - O)특수문자 사용해선 안된다. (ex_test^^.html - X)사이트의 첫번째 문서는 index.html로 저장해야 한다.저장한 파일이 열리게 되면..
HTML_기본 설정
HTML_기본 설정 2024. 5. 29. 코딩 프로그램 Visual Studio Code 편하게 작업 하도록 하기 위한 프로그램부터 셋팅한다. - live server (현재 진행중인 작업을 바로 확인이 가능하다)- Auto Rename Tag (태그를 자동으로 보여주는 프로그램) 왼쪽 하단 설정 버튼으로 기본설정 vs 코드 - 로컬 컴퓨터에서 디자인 한걸 웹으로 구현 > 리모트 서버에 업로드 하여야 다른 사람들도 확인이 가능해진다. 닷홈 :  무료로 ip를 받아서 사용 할 수 있다. 작업한 html 파일을 올려 (index, sub...) 사이트를 제작할 수 있다. FileZilla - 만든 html 파일을 local컴퓨터에서 나의 사이트에 바로 올릴 수 있게 할 수 있다. 다만 처음 시작할때 폴더를 연결 해두어야 오류없이 사이트가 연결이 된..
와이어 프레임
와이어 프레임 2024. 5. 24. - 피그마를 사용해 와이어 프레임 만들기 임의로 프레임을 생성 후 프레임에서 와이어프레임을 선택해 영역을 넓혀 준다. 그리고 만들고자 하는 용도에 따라 중앙선을 넣어주거나 레이아웃 그리드를 생성해 준다. 픽셀 단위의 그리드나 칼럼 그리드등 다양하게 생성이 가능하다. 중앙선을 넣어줄 거기 때문에 센터로 선을 넣어준다.내용을 입력할 때 여백을 남기기 유용하도록 auto layar 로 만들어 준다.먼저 글을 하나 배치해준 후 오토 레이어로 만들고 주변의 여백을 모두 0으로 만들고 alt를 눌러 원하는 여백만큼 띄워 배치한다. 그리고 Ctrl + D를 눌러 주면 처음 설정했던 여백만큼 띄워지면서 복사가 된다. 그리고 글자를 전체 한번 묶어서 오토 레이어로 만들어 주고 글자를 변경하면 글자에 따라 여백을 자동적으..
피그마를 이용해 아이콘 제작
피그마를 이용해 아이콘 제작 2024. 5. 21. 피그마를 사용해 아이콘을 제작하게 되면 svg 파일로 제작 하게 되는데, svg 아이콘 하나만 제작하면 여러가지 반응형에도 적용할 수 있다. 용량이 작고 크기를 원하는대로 늘려도 이미지가 깨지지 않기 때문에 이미지 관리에 용이하다. (백터 방식이기 때문에 가능함) 피그마는 백터방식 기반이라 가볍고 ui 작업에 유용한 툴포토샵으로 합성이나 이미지 생성을 하고 피그마로 레이아웃을 잡는다. 툴은 포토샵과 유사하며 툴 사용법이 간편한 편이다. 색상 채우기 선 채우기등 다양한 선택지가 있다. (오른쪽에 +,-를 선택해 기능을 넣거나 뺄 수 있다.) 'frame'은 포토샵에서 캔버스와 비슷한 개념을 가지고 있다. 작업한 컨텐츠들은 모두 frame 안에 있어야 외부로 출력할 경우 모두 가져 올 수 있다. 툴을 사용해..

티스토리툴바