position 속성 relative - 자신의 원래 위치를 기준으로 위치를 변경하고 싶을 때 사용 absolute - 자신이 아닌 자신을 감싸고 있는 부모 기준으로 위치 좌표를 잡을 때 사용 ( 이때 부모는 static 속성이 아닌 가장 인접해 있는 부모를 의미 ) - 이 속성을 부여하면 나머지 태그들이 이 속성이 있는 태그를 무시. 즉, 태그들의 위치가 겹칠 수 있음 fixed - 브라우저 전체를 기준으로 위치 좌표를 잡음. 스크롤이 생겨도 해당 태그는 그 자리에 고정 display 속성 inline - display 속성이 inline으로 지정된 요소는 전 후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치 - , , 태그 등.. inline-block - 하이브리드 모드처럼 동작 - 기본적으로..

1. Semantic Web의 의미 semantic 의미의, 의미론적인 Semantic Web이란? 시맨틱(Semantic)은 ‘의미론적인’이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 즉, 웹상에 분산되어 있는 다양한 데이터, 서비스들을 의미적 관계로 연동하기 하기 위해 시맨틱 정보를 활용할 수 있도록 하고, 이를 통해 복잡한 의미적 연결과 이에 기반한 처리가 가능하도록 하기 위한 시맨틱 웹기술과 응용에 대한 표준이다. ... 도통 무슨 소리인지... 이 글을 쓰면..

링크에 마우스를 가져다 대면 무지개색으로 바뀌는 효과입니다. HTML index.html yuzinnee's Github (click me!👆👆👆) (예시를 위하여 일부 코드만을 잘라왔습니다. 이 코드만으로는 효과가 보이지않습니다. 참고만하시길 바랍니다) CSS style.css a:hover, a:focus { animation-duration: 3s; animation-name: rainbowLink; animation-iteration-count: infinite; } @keyframes rainbowLink { 0% { color: #ff2a2a; } 15% { color: #ff7a2a; } 30% { color: #ffc52a; } 45% { color: #43ff2a; } 60% { colo..

자기소개 페이지를 만드는 과제 시각적으로 임팩트를 주고 싶어서 선택한 코드입니다. HTML index.html I'M A NAME yuzinnee's Github (click me!👆👆👆) d e v e l o p e r name에는 원래 이름을 넣으면 됩니다. 위의 GIF파일에서는 안 보이지만 원래는 뒤에 단색의 이름 페이지와 깃허브 링크 페이지가 연이어집니다. CSS style.css @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600..